如何动态设置模型名称的角度？

Question

如何在ng-repeat循环中动态设置模型名称

    <div ng-controller="parentController">
      <div ng-ccontroller="childController">

         <div data-ng-repeat="category in categories">
           <label >{{category.name}}</label>

           <div class="radio">
             <label><input type="radio" name=? value="1" ng-model=?> value 1</label>
             <label><input type="radio" name=? value="2" ng-model="?"> value 1</label>
          </div>

        </div>

     </div>
   </div>

在上面的这里，我必须动态设置名称和ng-model的值，就像每当发生循环时，父控制器的$ parent.cat0，$ parent.cat1，$ parent.cat2一样 。

我尝试了以下方法：

ng-model = '$parent.cat'+{{$index}}
         or
ng-model = "'$parent.cat1'+{{$index}}"
        or
ng-model = "$parent.cat"+{{$index}}

我尝试了以上方法，但没有解决。 还有其他方法可以在angular js中动态设置模型名称。

我期待这样的东西（以普通html给出）

<label>category1</label>
      <input type="radio" name ="cat1" value=0>value0</input>
      <input type="radio" name ="cat1" value=1>value1</input>
<label>category2</label>
      <input type="radio" name ="cat2" value=0>value0</input>
      <input type="radio" name ="cat2" value=1>value1</input>

Answer 1

在你的情况下应该是这样的：

 ng-model = "$parent.cat[$index]"

Answer 2

除非使用指令，否则我认为您无法做到。

但是你可以这样：

ng-model = "cat[$index]";

$ index由ng-repeat提供。 为了确保没有任何问题，您将需要在parentController中正确初始化模型：

$scope.cat = [undefined, undefined, undefined,...]

不是说我不使用$ parent，因为如果您在parentController中正确初始化了$ scope，则没有必要。

Answer 3

ng-model指令接受一个表达式。 这意味着您不必包括花括号。 这意味着您可以执行ng-model="$parent['cat' + $index]" 。

如果有数组，则其ng-model="$parent.cat[$index]"

Answer 4

ng-repeat创建自己的作用域，因此从ng-repeat中， $parent将引用childController，因此您需要执行$parent.$parent来访问parentController。 您还可以使用“ controller as”语法为您的范围命名，例如：

<div ng-controller="parentController as parentCtrl">
    <div ng-controller="childController as childCtrl">

        <div data-ng-repeat="category in categories">
            <label >{{category.name}}</label>

            <div class="radio">
                <label><input type="radio" name="{{parentCtrl['cat'+$index]}}" value="1" ng-model=""> value 1</label>
                <label><input type="radio" name="" value="2" ng-model="?"> value 1</label>
            </div>

        </div>

    </div>
</div>