Question

我正在使用Angular 1.4.8，并且希望将列表的仅选中的值放入数组中。然后，此数组必须是对象属性的值，如下所示：

myObject = {
  "myArray": [
    "apple",
    "orange",
    "pear"
  ]
}

我的HTML：

<div ng-app="myApp">
  <div ng-controller="MainCtrl as vm">
    <form name="myForm">
      <ul>
        <li ng-repeat="fruit in vm.fruits track by $index">
           <label>
              <input type="checkbox" ng-model="vm.myObject.myArray[$index]" ng-true-value="'{{fruit}}'" ng-false-value="undefined" />{{fruit}}
           </label>
         </li>
      </ul>
    </form>
    <pre>myObject = {{vm.myObject | json}}</pre>
  </div>
</div>

我的JS：

angular.module('myApp', []);

angular.module('myApp').controller('MainCtrl', function() {
  var vm = this;
  vm.myObject = {
    myArray: []
  }
  vm.fruits = ["apple", "orange", "pear", "naartjie"];
});

为便于参考，请参阅此fiddle。

请注意，当您选中并取消选中列表项时，该数组会保留值null。我不希望null绑定到数组，因为它会增加它的长度，这会导致其他代码出现问题。

如何忽略null，undefined之类的绑定假值...？

Answer 1

您可以创建一个函数来添加/删除数组中的水果。

这样的事情：

vm.insertIntoArray = function(value){
    var index = vm.fruitsArray.indexOf(value);
    if(index === -1){
        vm.fruitsArray.push(value);
    }else{
        vm.fruitsArray.splice(index,1);
    }
}

另外，将ng-change属性设置到您的复选框中。

<input type="checkbox" ng-model="vm.myObject.myArray[$index]" ng-change="vm.insertIntoArray(fruit)" ng-value="'{{fruit}}'"/>

这是一个工作小提琴：https://jsfiddle.net/fwu045u0/

Answer 2

根据您的要求I have implemented根据您的需要提供：

vm.boxChecked = function(item){

   var index = vm.myObject.myArray.indexOf(item);    
   if(index !== -1)
       vm.myObject.myArray.splice(index, 1);
   else
    vm.myObject.myArray.push(item);
};

小提琴也将检查任何复选框，其值在myArray加载时出现。你会看到它自动检查＆＃39; apple＆＃39;因为我把它放在数组中。如果您想删除此功能，只需从数组和指令的ng-checked部分删除apple，行为应该符合您的要求。

Answer 3

请查看此plunker以了解同一问题。

您可以修改模型以通过向原始对象添加一些selected属性来跟踪所选项目，例如

<li ng-repeat="fruit in vm.fruits track by $index">
   <label>
      <input type="checkbox" ng-model="fruit.selected" ng-true-value="'{{fruit}}'" ng-false-value="undefined" />{{fruit}}
   </label>
</li>

然后你有几个解决方案来构建所选元素的数组：

，其功能可过滤fruit属性上的selected==true数组
在fruits集合上监视，当选择/取消选择某个项目时，该集合将更新所选数组。
添加`ng-change =＆＃34; toggleSelect（fruit）＆＃34;在输入和管理单独的选定项目列表

Answer 4

问题归结为$index跟踪。从此代码中删除$index：

    <li ng-repeat="fruit in vm.fruits track by $index">
       <label>
          <input type="checkbox" ng-model="vm.myObject.myArray[$index]" ng-true-value="'{{fruit}}'" ng-false-value="undefined" />{{fruit}}
       </label>
     </li>

并将其替换为(key, value)，如下所示：

    <li ng-repeat="(key, value) in vm.fruits track by value">
       <label>
          <input type="checkbox" ng-model="vm.myObject.myArray.value[key]" ng-change="vm.insertIntoArray(value)" ng-true-value="'{{value}}'" />{{value}}
       </label>
     </li>

解决了我的问题。

虽然迄今为止的其他答案都很有帮助并且有助于最终解决方案，但没有一个包括我需要的所有内容。有关更多详细信息，请参阅更新后的fiddle。

将数组绑定到AngularJS中的对象属性时忽略falsey值

4 个答案: