動的フォーム入力をコントローラー関数に渡すことができません

Question

新しいデータ項目が見つかるたびに3つの入力を使用して動的にフォームを作成します。エンドユーザが選択されたフィールド名を特定のチェックボックスでクリックすると、フォームグループに対応する他の入力値をコントローラ機能に提出する必要があります。レイアウト用にJSFiddleを作成しました。次のように

<div class="panel panel-primary" ng-controller="citycontroller as ctrl"> 
    <div class="panel-heading"> 
     Available Cities 

    </div> 
    <div class="panel-body"> 
    <h4> 
    {{data}} 
    </h4> 
     <div ng-repeat="x in data" class="[ form-group form-inline ]"> 
      <input class="form-control input-md" type="checkbox" id="{{x.name}}" ng-model="name" autocomplete="off" /> 
      <div class="[ btn-group ]"> 
       <label for="{{x.name}}" class="[ btn btn-success ]"> 
        <span class="[ glyphicon glyphicon-ok ]"></span> 
        <span> </span> 
       </label>                 <label for="{{x.name}}" class="[ btn btn-default active ]"> 
         {{x.name}} 
       </label> 
      </div> 
      <input class="form-control input-md" type="text" placeholder="periodicity" id="x.periodicity" autocomplete="off" /> 
     </div> 
     <button type="button" class="btn btn-info" style="float: right" ng-click="ctrl.addInfo()">Add</button> 
    </div> 
</div> 

コントローラの方法は次のとおりです。

var mainApp = angular.module('cityinfo',[]); 
mainApp.controller('citycontroller', function($scope,$http,$window,$interval) { 

var cities=[{"name":"hyd","periodicity":"5"},{"name":"chn","periodicity":"5"},{"name":"blr","periodicity":"5"}]; 

$scope.data = cities; 

this.addInfo=function() { 
     console.log('update city information...'); 
     //get list of city names that are selected by the user in the form here and print their values 
    } 
}); 

コントローラメソッドaddInfo（）内のフォームの値を取得する方法についてのアイデアを得ていません。この点で誰も助けてくれますか？

Answer 1

ng-modelを使用してチェックするチェックボックスを追跡する必要があります。

1つのアプローチは、次のようにすることができます。

HTML：

<div ng-repeat="city in cities"> 
    <input type="checkbox" ng-model="city.checked" /> 
</div> 

JS：

$scope.cities = [{ 
    name: 'foo', 
    periodicity: 5, 
    checked: false 
}, { 
    name: 'bar' 
    periodicity: 6, 
    checked: false 
}] 

$scope.addInfo = function() { 
    // Using lodash 
    _($scope.cities).filter({checked: true}).each(function(city) { 
     // do stuff 
    } 
} 

Answer 2

あなたはすべてであなたのコードを変更する必要はありません。ちょうどあなたの入力のNG-モデルを変更することにより、あなたはそれを達成することができます：

HTML

 </div> 
    <div class="panel-body"> 
    <h4> 
    {{data}} 
    </h4> 
     <div ng-repeat="x in data" class="[ form-group form-inline ]"> 
      <input class="form-control input-md" type="checkbox" id="{{x.name}}" ng-model="x.value" autocomplete="off" /> 
      <div class="[ btn-group ]"> 
       <label for="{{x.name}}" class="[ btn btn-success ]"> 
        <span class="[ glyphicon glyphicon-ok ]"></span> 
        <span> </span> 
       </label> 
       <label for="{{x.name}}" class="[ btn btn-default active ]"> 
         {{x.name}} 
       </label> 
      </div> 
      <input class="form-control input-md" type="text" placeholder="periodicity" id="x.periodicity" autocomplete="off" /> 
     </div> 
     <button type="button" class="btn btn-info" style="float: right" ng-click="ctrl.addInfo()">Add</button> 
    </div> 
</div> 

SCRIPT値については、ブラウザのコンソールチェックで

var mainApp = angular.module('myApp',[]); 
      mainApp.controller('citycontroller', function($scope) { 

var cities=[{"name":"hyd","periodicity":"5"},{"name":"chn","periodicity":"5"},{"name":"blr","periodicity":"5"}]; 

$scope.data = cities; 

this.addInfo=function() { 
     console.log($scope.data); 
     //get list of city names that are selected by the user in the form here and print their values 
    } 
}); 

。チェックボックスが選択されている場合はtrueになります。