ng-model不会在ng-repeat中绑定，而其他所有内容都可以 [英] ng-model does not bind within ng-repeat, while everything else does

问题描述

我知道有关此主题的问题已经很多，我尝试了发现的解决方案，但似乎不起作用. 基本上，我有一个称为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的 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

I know there are a ton of questions already on this topic, I tried the solutions I found but it doesnt seem to work. Basically I have this directive called basicMunch that goes through an array of objects and creates some html. Everything works nicely and bind other than the ng-modal Here is the code for the directive:

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

Here is the array:

 $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"
    }
];

Here is what i see in the console

I have tried doing $parent.mu.tag and $parent.$parent.mu.tag, but that didnt work as it shouldnt have because it isnt nested in some other scope (atleast not that I know of)

I tried doing the name of the controller.mu.tag, that too doesnt work

I tried doing mu['tag'] and that doesnt work either

I tried using {{ and that doesnt work I changed it to ng-bind={{mu.tag}} and that does work It is weird to me that it works for ng-bind but it doesnt work for ng-model.... Anyhow, anyone have any ideas?

解决方案

It seems like what you are wanting is to bind the ng-model property to the value of mu.tag, rather than to mu.tag itself.

Due to the way that ng-model is parsed, you need to use a variation of the bracket syntax in order to make this possible. The proper syntax here is $parent[mu.tag] which will look on the $parent object for the property named by the value of mu.tag. The parent of the ng-repeat is $scope, so this ends up with the property on the correct object.

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

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

这篇关于ng-model不会在ng-repeat中绑定，而其他所有内容都可以的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！