如何在AngularJs中收集ng-model Checkbox？

Question

這是我的數據：

var fields = [
  {id: 1, name: 'Model'},
  {id: 2, name: 'Price'},
  {id: 3, name: 'Condition'},
  {id: 4, name: 'Ads Type'}
];

這是我的查看代碼：

 <ion-checkbox ng-repeat="field in fields"
               ng-model="field.id"
               ng-checked="field.id">
               {{ field.name }}
 </ion-checkbox>
 <button class="button button-positive" ng-click="updateField()">
    Update SubCategory Field
 </button>

這是我的控制器代碼

$scope.updateField = function(){
   // How can I get an Array of any Checked rows 
   // Expected result is: [2, 4]
}

我想獲取價格和廣告類型的ID作為數組

我已經試過了：

console.log($scope.field.id);

和錯誤通過

Cannot read property 'id' of undefined

任何幫助，將不勝感激。

干杯

Answer 1

http://plnkr.co/edit/lOSaa9k7EEpgriz4AmaZ?p=preview

的HTML

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script   src="https://code.angularjs.org/1.3.9/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div ng-controller="ctrl ">

   <input type="checkbox" ng-repeat="field in fields"
               ng-model="field.checked"
               ng-checked="field.checked">
               {{ field.name }} 
 </input>
 <button class="button button-positive" ng-click="updateField()">
    Update SubCategory Field
 </button>


          {{ selectedItems  | json }} 
  </div>
</body>

</html>

JS

var app = angular.module("app", [])

app.controller('ctrl', function($filter, $scope){

 $scope.fields = [
  {id: 1, name: 'Model'},
  {id: 2, name: 'Price'},
  {id: 3, name: 'Condition'},
  {id: 4, name: 'Ads Type'}
];

$scope.updateField = function(){

    var p = [];
    for (var i = 0; i < $scope.fields.length; i++) {
       var item = $scope.fields[i];
       if ( item.checked) {
        p.push(item )  
       }

    }

    $scope.selectedItems = p;
}

});

如何在AngularJs中收集ng-model Checkbox？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-06-11 11:58:29

如何在AngularJs中收集ng-model Checkbox？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-06-11 11:58:29

解決方案1
0 已采納 2015-06-11 11:58:29