アクセスフォームはデータバインディングなしでAngularJSの値を制御します

Question

私はレールの足場によって生成され、正しく動作するフォームを持っています。このフォームに新しいAngularコントローラーを追加して、スコア/プログレスバーの種類を計算して、ユーザーにアプリケーションの完成度を示すようにしたいと考えています。

私は更新中の問題に直面しています。実際、

• レール私はJavaScriptの一部の値を初期化しなかったのでngModelそのコントローラをリセットさ
• フォームコントロールに値を代入します。

以下のコードでは、編集中にside_idコントロールが空になります。

データバインディングを行わずに、さまざまなコントロールをフォームで読み込むクリーンな方法はありますか？私は、イベントを使用して要素の値の変更のためにlistentingています。また

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
    <li class="active"><a href="#general" data-toggle="tab">Données générales</a></li> 
    <li><a href="#location" data-toggle="tab">Location</a></li> 
    <li><a href="#suppl" data-toggle="tab">Données supplémentaires</a></li> 
    <li><a href="#photos" data-toggle="tab">Photos</a></li> 
    </ul> 

    <div id="my-tab-content" class="tab-content"> 
    <div class="tab-pane mypanel active" id="general"> 
     <br/> 
     <div class="form-group"> 
     <div class="col-md-2"> 
      <div class="field"> 
      <%= f.label :side_id %><br> 
      <%= f.collection_select(:side_id, Side.all,:id,:label,{}, {:class => "form-control", "ng-model" => "side_id"}) %> 
      {{side_id}} 
      </div>   
     </div> 
     <div class="col-md-4"> 
      <div class="field"> 

Answer 1

side_id = angular.element('#classified_side_id').val(); 

。

Answer 2

初期値のディレクティブをngModelに作成することができます。デフォルト値はhtmlです。

ライブサンプルjsfiddleです。

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($scope) { 
 
    $scope.options = [{ 
 
     id: 0, 
 
     name: "No" 
 
    }, { 
 
     id: 1, 
 
     name: "Yes" 
 
    }, { 
 
     id: 2, 
 
     name: "Unknow" 
 
    }]; 
 
    }) 
 
    .directive('initValue', function() { 
 
    return { 
 
     restrict: "A", 
 
     require: "ngModel", 
 
     scope: { 
 
     initValue: "=", 
 
     ngModel: "=" 
 
     }, 
 
     link: function(scope) { 
 
     scope.ngModel = scope.initValue; 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController"> 
 
    <input ng-model="id" init-value="'dfdffd'"> 
 
    <pre>id={{id}}</pre> 
 
    <select ng-model="idSelect" init-value="'2'"> 
 
     <option value="0">No</option> 
 
     <option value="1">Yes</option> 
 
     <option value="2">Unknow</option> 
 
    </select> 
 
    <pre>idSelect={{idSelect}}</pre> 
 
    <select ng-model="idSelect2" init-value="1" ng-options="item.id as item.name for item in options"> 
 
    </select> 
 
    <pre>idSelect2={{idSelect2}}</pre> 
 
    </div> 
 
</div>