無法將動態表單輸入傳遞到控制器功能

Question

我希望每次找到新的數據項時都使用三個輸入動態創建表單。每當最終用戶點擊特定的複選框時，所選的字段名稱，與表單組相對應的其他輸入值都必須提交給控制器功能。我爲佈局創建了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檢查哪些複選框。

一種方法可能如下。

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 
    } 
}); 

在對價值瀏覽器控制檯檢查。如果選擇了複選框，這將是真實的。