How can i set model name dynamically in angular?

Question

How to set the model name dynamically in ng-repeat loop

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

Here in above I have to set name and ng-model values dynamically Like $parent.cat0,$parent.cat1,$parent.cat2 of parent controller whenever loop through happens.

I tried the following:

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

I tried the above things nothing worked out. Is there any other method to set the model name dynamically in angular js.

I am expecting somethong like this (given in normal 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>

score 1 · Answer 1 · answered Feb 09 '16 at 09:55

1

in your case it should be something like:

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

answered Feb 09 '16 at 09:55

Stepan Suvorov

25,118
26
108
176

this will fetch the values described in parent scope. But i want to frame a string which act as a model name for ex $parent.cat0 is a model name. Here i have to dynamically generate "$parent.cat0" string and substitute in ng-model the 0 should be coming from index. – Praveenkumar Feb 09 '16 at 10:39

score 0 · Answer 2 · answered Feb 09 '16 at 09:57

0

Unless using a directive i don't think you can do it.

But you can like this :

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

$index is provided by ng-repeat. To be sure to not have any problem you will need to initialize properly your model in your parentController :

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

Not that i don't use $parent because it's not necessary if you initialized properly the $scope in your parentController.

answered Feb 09 '16 at 09:57

Walfrat

5,363
1
16
35

I dont want to fetch the values from scope. I want to frame a string dynamically that will act as model name. – Praveenkumar Feb 09 '16 at 10:41

score 0 · Answer 3 · answered Feb 09 '16 at 10:01

0

the ng-model directive accepts an expression. This means you don't have to include the curly braces. This means you can just do ng-model="$parent['cat' + $index]".

And if you got an array, its ng-model="$parent.cat[$index]"

answered Feb 09 '16 at 10:01

dendimiiii

1,659
3
15
26

score 0 · Answer 4 · answered Feb 09 '16 at 10:04

ng-repeat creates its own scope, so from inside an ng-repeat $parent will refer to childController, so you will need to do $parent.$parent to access parentController. You can also use the 'controller as' syntax to give your scopes a name, e.g.:

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

How can i set model name dynamically in angular?

4 Answers4

Linked