如何为Angular JS中的指令分配动态生成键的模型？

Question

假设我有一个范围对象，如下所示：

$scope.user = {
    pets : {}
}

，如下所示的元素：

<my-pets 
    id="pets" 
    my-model="user.pets"
    data-title="Pet name" 
    data-types="dog, cat, bird, hamster, exotic">
</my-pets>

和一个类似这样的指令：

app
  .directive('myPets', function() {
    return {
      restrict : 'E',
      replace : true,
      scope : {
        id : '@',
        myModel : '=',
        title : '@'
      },
      templateUrl : 'pages/directives/mypets.html',
      link : function(scope, elem, attrs) {
        var pet_types = attrs.types.split(",");
        for (var i = 0; i < pet_types.length; i++) {
          pet_types[i] = pet_types[i].trim();
        }

        scope.pet_types = pet_types;
      }
    };
  });

使用像这样的模板(使用material指令)：

<div>
    <label>{{title}}</label>
    <md-tabs>
      <md-tab ng-repeat="pet_type in pet_types">
        <md-tab-label>{{pet_type}}</md-tab-label>
        <md-tab-body>
          <md-input-container>
            <label>{{pet_type}} {{title}}</label>
            <input ng-model="---what should go here?---" id="id-{{pet_type}}" type="text"/>
          </md-input-container>
        </md-tab-body>
      </md-tab>
    </md-tabs>
</div>

模型就在角度控制器之外，如下所示：

$scope.user = {
    pets : {}
};

但我正在尝试实现这样的结构：

$scope.user = {
    pets : {
        dog : '',
        cat : '',
        bird : '',
        hamster : '', 
        exotic : ''
    }
};

宠物类型作为属性data-types传递。模型还不知道它应该包含哪些类型，因为在未来应该可以动态添加更多的宠物类型。因此，我们的想法是将一个ng-model="user.pets"传递给该指令，并且该指令应该足够智能，能够接受通过参数data-types传递的宠物类型，并为每个类型创建一个输入，该输入链接到user.pets中的每个属性。

您可能已经注意到模板中的---what should go here?---。现在，根据这一点，如果我用一个对象向未编译的指令传递了一个my-model，并且知道这个对象应该包含宠物类型的键，以及每个宠物类型的用户输入的值，我应该怎么做呢？我试过这个：ng-model="{{myModel}}.{{pet}}"，但它抱怨这里有一个{，所以我想我不能动态生成模型名。

Answer 1

您不需要在ng-repeat中引用模型的根。

在本例中，您的模型是pets，而不是myModel。

在这种情况下，在ng-model-directive中访问作用域变量的正确方法是：

<input ng-model="pet" id="id-{{pet}}" type="text"/>

您还可以通过根对象访问循环对象：

<input ng-model="pets[pet]" id="id-{{pets[pet]}}" type="text"/>