1

我有下面的控制器設置,因此我可以將選中的值添加到數組中,如下所示。使用ng-model angular js的多選複選框

(function (app) { 
 
    'use strict'; 
 
    
 
    app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) { 
 
    // fruits 
 
    $scope.fruits = ['apple', 'orange', 'pear', 'naartjie']; 
 
    
 
    // selected fruits 
 
    $scope.selection = ['apple', 'pear']; 
 
    
 
    // toggle selection for a given fruit by name 
 
    $scope.toggleSelection = function toggleSelection(fruitName) { 
 
     var idx = $scope.selection.indexOf(fruitName); 
 
     
 
     // is currently selected 
 
     if (idx > -1) { 
 
     $scope.selection.splice(idx, 1); 
 
     } 
 
     
 
     // is newly selected 
 
     else { 
 
     $scope.selection.push(fruitName); 
 
     } 
 
    }; 
 
    }]); 
 
})(angular.module('app', []));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
<div ng-controller="SimpleArrayCtrl"> 
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
      <h4>selectables</h4> 
 
      <form class="form-group" novalidate name="test"> 
 
       <label ng-repeat="fruitName in fruits" class="checkbox-inline"> 
 
       <input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-checked="selection.indexOf(fruitName) > -1" ng-click="toggleSelection(fruitName)"> {{fruitName}} 
 
       </label> 
 
      </form> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
      <h4>selection</h4> 
 
      <pre>{{selection|json}}</pre> 
 
      </div> 
 

 
      <div class="col-md-6"> 
 
      <h4>inputs</h4> 
 
      <pre>{{fruits|json}}</pre> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <h4>form</h4> 
 
      <pre>{{test|json}}</pre> 
 
      </div>   
 
     </div> 
 
     </div> 
 
    </div>

我所試圖做的是數組的值綁定到表單,這樣我可以提交數組的內容。

我已經加入ng-model我的複選框,輸入,但我只是似乎只能真假回到我的陣列,而不是我的價值

   <input ng-model="fruitName" type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-checked="selection.indexOf(fruitName) > -1" ng-click="toggleSelection(fruitName)"> 

我怎麼能選擇的值綁定到模型並確保滴答聲仍然符合點擊的規定,以便我可以在提交表單時提交數組的值?

回答