AngularJS: how to generate dynamic ng-model

Question

My current scenario is: I've doing nesting repetition like follow:

<form name="task_form" ng-app="myApp" ng-submit="tasksubmit()">    
 <ul class="items-list">
      <li ng-repeat="task in taskslist | orderBy:orderProp">
      <p>
        <strong>{{task.title}}</strong>
      </p>
      <select name="task_value" ng-model="task.dropdown_value" class="select-box">
        <option ng-repeat="item in task.dropdown_values" value="{{item}}">{{item}}</option>
      </select>
     </li>
    </ul>
</form>

In <li> I'm repeating the <option> too. I want to generate the dynamic ng-model values in <select ng-model="">.. So that i can get them in controller.. and distinguish them via their task.id.

@WasimMulla @dreamweiver .. here i have tasklist array of more then one hundred tasks. and each task contain dropdown and having some values. when i submit the form then via upper coding i can't get the submited or selected dropdown_value for dropdown against the task.id for next use to send as done tasks.. — Tech Kid
– Tech Kid, Commented Jan 6, 2016 at 11:48
@dreamweiver Sir, waiting for your reply if u can do this... — Tech Kid
– Tech Kid, Commented Jan 6, 2016 at 13:11

Wasimakram Mulla · Accepted Answer · 2016-01-06 11:51:17Z

1

Assigning a dynamic value to ng-model is not an Ideal way, what you can do is write a specific name to the ng-model (below)

<select name="task_value" ng-model="dropdown_value" class="select-box" ng-change="checkTaskId(task.id)">

you can even use a ng-change to the select element and traverse through your object using a loop and check the value according to the task.id, but in your controller itself.

Else if you really need the ng-model to be dynamic then below is an easy and alternate solution.

<select name="task_value" ng-model="myData.values[task.dropdown_value]"  class="select-box">

in yout controller you can have it like

$scope.myData= {
    values:{}
};

There are various other ways to do so. ways change according to your requirement. Hope this solves your issue.

answered Jan 6, 2016 at 11:51

Wasimakram Mulla

5118 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tech Kid Over a year ago

Help is really appreciable but I'm confused bro how to use it to get the task.dropdown_values selected value as well as task.id for this any specific task. Let me tell you about my array.

"taskslist":[{"id":"20","title":"Snow Level on Deck","type":"Dropdown","dropdown_values" :[{"id":"55","value":"demo value"},{"id":"56","value":"less then 1 ft."},{"id":"57","value":"1 to 2 ft" },{"id":"58","value":"2+ ft"}]}]

please have look on this array. how can i get the item.id along with task.id via your suggested ng-model="myData.values[task.dropdown_value]"

Wasimakram Mulla Over a year ago

try using ng-options in select element as below

<select class="form-control"  ng-options="item.value for item in taskslist.dropdown_values track by item.id" ng-model="selectedItem" ng-change="checkvalue(task.id, item.id)"></select>

This is pass both the values with every change of select drop down. if the solution cannot suffice the resolution please create a plunker example i will solve it.

Tech Kid Over a year ago

Sir, Can i use this ng-model="myData.values[task.dropdown_value,task.id]". ? I'm creating plunker too.

Wasimakram Mulla Over a year ago

I have created a plunker for you where you will get live preview of every value (item id, item value) with its task id. plnkr.co/edit/HsWh2rWO6lO0CGQecRPw?p=preview Hope this resolves your issue

Tech Kid Over a year ago

sir, check my plunker too ...

|

Collectives™ on Stack Overflow

AngularJS: how to generate dynamic ng-model

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related