ng-model 不绑定在 ng-repeat 中，而其他所有内容都绑定

Question

我知道关于这个主题已经有很多问题，我尝试了我找到的解决方案，但似乎没有用。基本上我有一个名为 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 .... 无论如何，有人有什么想法吗？

Answer 1

您似乎想要的是将 ng-model 属性绑定到 mu.tag 的 value，而不是 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

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

ng-model 不绑定在 ng-repeat 中，而其他所有内容都绑定

ng-model does not bind within ng-repeat, while everything else does

javascript

angularjs

angularjs-ng-model

ng-bind

The DEMO