在指令中更改 ng-model

Question

我想使用自定义指令创建 UI。 我这样做是：

指令：

module.directive('testData', function() {
return {
    templateUrl: 'template/mainTemplate.html'
};

});

模板：

<form class="class">
<div ng-repeat='mainJson in mainJsonData'>
    <div class='mainJson.divClass'>
        <input type="{{mainJson.inputType}}" class="{{mainJson.inputClass}}" placeholder="{{mainJson.placeHolder}}" maxlength='{{mainJson.inputMaxLength}}' ng-model="mainJson.name"/>
    </div>
</div>

JSON 数据

[
{"divClass":"form-group","inputType":"text","inputClass":"form-control","inputNgModel":"name","inputMaxLength":"10","placeHolder":"Name"},
{"divClass":"form-group","inputType":"text","inputClass":"form-control","inputNgModel":"city","inputMaxLength":"10","placeHolder":"city"},
{"divClass":"form-group","inputType":"text","inputClass":"form-control","inputNgModel":"mobile","inputMaxLength":"10","placeHolder":"mobile"}
]

但在模板中 ng-model 无法正常工作。它将 UI 创建为：

<input type="text" ng-model="mainJson.inputNgModel" maxlength="10" placeholder="Name" class="form-control">

这是不正确的。应该是这样的：

<input type="text" ng-model="name" maxlength="10" placeholder="Name" class="form-control">

Answer 1

检查这个工作plunkr out

这就是你需要的：

<input ng-model="mainJson[mainJson.inputNgModel]" />

只需将 ng-model 绑定到数组 mainJson 的属性值 mainJson.inputNgModel 处的对象的引用。

这里要理解的一点是，如果你知道要访问的数组的属性，你可以这样：

var getProperty = arr.thisPropertyIKnow;

如果要动态获取属性名称，请执行以下操作：

var thisPropertyIDontKnow = 'valueAtRunTime';
var getProperty = arr[thisPropertyIDontKnow];

带有插图的完整模板。

<form class="class">
  <p>Inside directive</p>

  <div ng-repeat='mainJson in mainJsonData'>
    <div class="{{mainJson.divClass}}">
      <input ng-model="mainJson[mainJson.inputNgModel]" type="{{mainJson.inputType}}" class="{{mainJson.inputClass}}" placeholder="{{mainJson.placeHolder}}" maxlength='{{mainJson.inputMaxLength}}' />
    </div>
    <p>value of ng-model is : {{mainJson.inputNgModel}}</p>
    <p>Dipplay the value inside the input field: {{mainJson[mainJson.inputNgModel]}}</p>
  </div>
</form>

另外，在你的指令中，你需要初始化数组：

app.directive('testData', function() {
  return {
    templateUrl: 'mainTemplate.html',
    controller: function($scope) {
      $scope.mainJsonData = [{
        "divClass": "form-group",
        "inputType": "text",
        "inputClass": "form-control",
        "inputNgModel": "name",
        "inputMaxLength": "10",
        "placeHolder": "Name"
      }, {
        "divClass": "form-group",
        "inputType": "text",
        "inputClass": "form-control",
        "inputNgModel": "city",
        "inputMaxLength": "10",
        "placeHolder": "city"
      }, {
        "divClass": "form-group",
        "inputType": "text",
        "inputClass": "form-control",
        "inputNgModel": "mobile",
        "inputMaxLength": "10",
        "placeHolder": "mobile"
      }];
    }
  };
});