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

我使用的是Angular 1.4.8，只想将列表的选中值放入数组中。然后，该数组需要是对象属性的值，如下所示：

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

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

我的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>

为了便于参考，请参见此

请注意，当您选中然后取消选中列表项时，数组将保留一个值

null

。我不希望将

null

绑定到数组，因为它增加了数组的长度，这会导致其他代码出现问题

---

如何忽略绑定错误值，如

null

，

未定义的
，等等？
您可以创建一个函数来添加/删除数组中的结果

大概是这样的：

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

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

另外，在复选框中设置ng change属性

<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>



这是一把有效的小提琴：
看看这个，同样的问题

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

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


{{水果}


然后，您可以使用多种解决方案来构建选定元素的阵列：


使用一个函数过滤
selected==true
属性上的
水果
数组

在
fruits
集合上有一个手表，当选择/取消选择某个项目时，该手表将更新所选数组

通过在输入中添加`ng change=“toggleSelect（fruit）”，并管理所选项目的单独列表

根据您的要求，按照您可能需要的内容：

    <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>

小提琴手还将选中其值在加载时出现在myArray中的任何复选框。你会看到它自动检查'苹果'为你，因为我把它在数组中。如果您希望删除此功能，只需将apple从阵列中删除，并选中指令的
ng部分，其行为应符合您的要求。
问题归结为通过
$index
进行跟踪。正在从此代码中删除
$index
：

    <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>

解决了我的问题

尽管到目前为止，其他答案都很有帮助，有助于最终解决问题，但没有一个答案包含了我所需要的一切。有关更多详细信息，请参阅更新的。
根据绑定的方式，使用真/假值绑定显式设置特定索引的值。您可能需要调整html的行为以执行一些JS来维护myArray，或者调整其他代码以容纳空值以获得所需的功能。此解决方案只需稍加调整即可。您将值放入splice而不是索引中。这把小提琴是根据你的作品制作的。是的，当然。我错误地使用了值而不是索引。谢谢@RayfenWindspear.Victor Hugo，很好的解决方案。这与我所寻找的略有不同（您的代码推送到一个数组，但我需要该数组成为对象的属性）。不过，非常感谢。看看你如何处理这个问题是非常有帮助的@RayfenWindspear，谢谢你的编辑，我很感激。我删除了这个作为最佳答案，因为在仔细查看之后，你从我的小提琴中删除了
ng model
，但我需要
ng model
在我的解决方案中。根据angular docs，
ng型号
不能与选中的
ng一起使用
。如果您知道解决方法，请发布。不幸的是，您的数据结构不支持您的所有要求。如果希望使用ng模型，则必须对对象进行一些更改。如果您在POST中跟踪$index：<代码> NG模型=“VM.MyObjult.MyLode[$index ] 您必须在水果收集中间的某个点设置元素。例如，如果设置$index=2，则必须有某个对象占用$index[0-1]。由于我看不到通过向数组添加
null
值而受到影响的代码，因此很难修复我的答案。