Change ng-model in directive

Question

I want to create UI using custom directive. I am doing it as :

Directive :

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

});

Template :

<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 data

[
{"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"}
]

but in template ng-model is not working properly. It create UI as :

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

Which is not correct. it should be like :

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

Some Question http://stackoverflow.com/questions/14115701/angularjs-create-a-directive-that-uses-ng-model — Harutyun Abgaryan, Sep 05 '16 at 20:24
I am new in angular. I am getting same issue with ng-click also. — user2919261, Sep 05 '16 at 21:12

SLearner · Accepted Answer · 2016-09-06T14:32:56.493

Check this working plunkr out

This is what you need :

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

Just bind ng-model to the reference of object at property value mainJson.inputNgModel of array mainJson.

Point to understand here is that if you know the property of the array you want to access, you do it like this:

var getProperty = arr.thisPropertyIKnow;

If you want to get the name of property dynamically, do this:

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

Complete template with illustration.

<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>

Also, inside your directive, you need to initialize the array:

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

Change ng-model in directive

1 Answers1