如何以角度动态设置模型名称？答案

【问题标题】：How can i set model name dynamically in angular?如何以角度动态设置模型名称？
【发布时间】：2016-02-09 18:44:58
【问题描述】：

如何在 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>

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

我尝试了以下方法：

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>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

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

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

【讨论】：

这将获取父范围中描述的值。但我想构建一个字符串，作为前 $parent.cat0 的模型名称是模型名称。在这里我必须动态生成“$parent.cat0”字符串并在 ng-model 中替换 0 应该来自索引。

【解决方案2】：

除非使用指令，否则我认为你做不到。

但你可以这样：

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

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

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

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

【讨论】：

我不想从范围中获取值。我想动态构建一个字符串作为模型名称。

【解决方案3】：

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

如果你有一个数组，它的ng-model="$parent.cat[$index]"

【讨论】：

【解决方案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>

【讨论】：