【问题标题】：ng-model does not bind within ng-repeat, while everything else doesng-model 不绑定在 ng-repeat 中，而其他所有内容都绑定
【发布时间】：2017-08-04 15:54:12
【问题描述】：

我知道已经有很多关于这个主题的问题，我尝试了我找到的解决方案，但它似乎不起作用。基本上，我有一个名为 basicMunch 的指令，它遍历对象数组并创建一些 html。除了 ng-modal 之外，一切都运行良好并绑定这是指令的代码：

>     munches.directive('basicmunches', function() {   return {
>     require: 'ngModel',
>     template:`<div class='columns'>  <div ng-repeat="mu in basicMunches" class="card column col-4 col-sm-12">
>           <div class="card-header">
>             <h4 class="card-title">{{mu.name}}</h4>
>             <h6 class="card-subtitle">{{mu.type}}</h6>
>           </div>
>           <div class="card-body">
>             {{mu.text}}
>           </div>
>           <div class="card-footer">
>             <div class="form-group">
>               <label class="form-switch">
>                 <input ng-model="mu.tag" name="{{mu.tag}}"  type="checkbox" />
>                 <i class="form-icon"></i> Turn On
>               </label>
>             </div>
>           </div>
>         </div></div>`   } });

这是数组：

 $scope.basicMunches  = [
    {"name":"The New York TImes",
     "text":"Get the top headlines from the NYT every morning", 
     "type":"News", "tag":"nyt"
    },
    {"name":"Wall Street Journal",
     "text":"Get the top headlines from the WSJ every morning", 
     "type":"News", "tag":"wsj"
    }
];

这是我在控制台中看到的

我已经尝试过 $parent.mu.tag 和 $parent.$parent.mu.tag，但这并没有奏效，因为它没有嵌套在其他范围内（至少我不知道）

我试着做controller.mu.tag的名字，也不管用

我试过做 mu['tag'] 也不管用

我尝试使用 {{ 但这不起作用我将其更改为 ng-bind={{mu.tag}} 并且确实有效对我来说很奇怪它适用于 ng-bind 但它不适用于 ng-model.... 无论如何，有人有什么想法吗？

【问题讨论】：

您的 ng-model="mu.tag" 绑定到一个字符串，输入是 type="checkbox" 不起作用。将类型更改为文本或绑定到布尔值。
它似乎在 plunker 中工作 here，你能在这里重现问题吗..
@PankajParkar 是的，该脚本正在运行，但这并不是我真正想要做的。如果您检查元素输入，您将看到我所询问的问题仍然存在，ng-model 仍然说它等于“mu.tag”，而不是我想要的标签名称
您尝试做的事情很奇怪。您真的想要ng-model="wsj"，通过从mu.tag 属性读取值wsj，是吗？虽然可能有办法让这成为可能，但就这个数组而言，它并没有真正的意义，因为这意味着你在$scope 上有一个名为wsj 的属性，以及如何这是否与mu 的其余部分有关，特别是因为可以有多个mu 但只有一个wsj 属性？
是的，这正是我想做的。每个 mu 标签都有不同的属性，wsj 只是一个例子。 @克莱斯

标签： javascript angularjs angularjs-ng-model ng-bind

【解决方案1】：

您似乎想要将ng-model 属性绑定到mu.tag 的值，而不是mu.tag 本身。

由于ng-model 的解析方式，您需要使用括号语法的变体来实现这一点。这里的正确语法是$parent[mu.tag]，它将在$parent 对象上查找由mu.tag 的值命名的属性。 ng-repeat 的父级是 $scope，所以这最终得到了正确对象上的属性。

<input ng-model="$parent[mu.tag]" name="{{mu.tag}}"  type="checkbox" />

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

【讨论】：

有趣，这看起来很有效，尽管当我使用检查元素检查时它只显示“$parent[mu.tag]”......我要多玩一点，看看是否它有效...
浏览器不知道您绑定的实际属性，因为它是一个评估属性，通常您直接绑定到该属性。
另外，我通常不建议使用$parent，因为如果有任何改变 DOM 层次结构，可能会导致意外结果。但是，在这种情况下，您唯一的其他选择是创建一个可以保存属性的对象或更改为 Controller As 语法。我实际上建议更改为 Controller As 有很多原因，但这有点超出了这个问题的范围。
哇，有趣。总之非常感谢。您能否将控制器上的一些资源作为语法指向我？
这篇github.com/johnpapa/angular-styleguide/blob/master/a1/… 总体上是一本不错的读物，但我提到的部分是专门关于 Controller As 的。

【解决方案2】：

让复选框输入用property accessor bracket notation 填充对象的属性：

<fieldset ng-repeat="mu in munchies">
    <input ng-model="choices[mu.tag]" name="{{mu.tag}}"
             type="checkbox" />
      &nbsp;  Turn On
</fieldset>

The DEMO

angular.module("app",[])
.controller("ctrl",function($scope) {
  var vm = $scope;
  vm.choices = {};
  vm.munchies  = [
    {"name":"The New York TImes",
     "text":"Get the top headlines from the NYT every morning", 
     "type":"News", "tag":"nyt"
    },
    {"name":"Wall Street Journal",
     "text":"Get the top headlines from the WSJ every morning", 
     "type":"News", "tag":"wsj"
    }
  ];
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    Subscriptions {{choices | json}}
    <fieldset ng-repeat="mu in munchies">
      <h3>{{mu.name}}</h3>
      <p>{{mu.text}}</p>
      <input ng-model="choices[mu.tag]" name="{{mu.tag}}"
                 type="checkbox" />
          &nbsp;  Turn On
      <br/>Subscribed {{choices[mu.tag]}}
    </fieldset>
  </body>

【讨论】：