Rudziankoŭ Rudziankoŭ - 2 months ago 14
AngularJS Question

AngularJS: tune ng-model work together with ng-repeat

I have following code:

<h3>Дата наведвання:</h3>
<select class="form-control" size=info.size()>
<option ng-model="i.isSelected" ng-repeat="i in info" value="{{i.date}}">{{i.date}}</option>
</select>
<div class="container">
<table class="table">
<tr>
<td ng-repeat="i in info"><p ng-if="i.isSelected">Name: {{i.name}}</p></td>
</tr>
</table>
</div>


Sorry for dump question. This is simple, I would like my table to show data according to selected date. Please, help me to figure out.

Answer

ng-model should be there on select not on option tag. As ng-model does only working on input,textarea,select out of the box.

Markrup

<h3>Дата наведвання:</h3>
<select class="form-control" size="info.size()" ng-model="selectedInfo">
    <option ng-repeat="i in info" value="{{i.date}}">{{i.date}}</option>
</select>

Where ng-model="selectedInfo" will enable two way binding over your select, & selected value would be available inside selectedInfo $scope variable.


The most preferred way to dealt with select with option by using ng-options

<h3>Дата наведвання:</h3>
<select class="form-control" size="info.size()" 
   ng-model="selectedInfo"
   ng-options="i as i.date for i in info">
</select>

For showing selected to date you could use selectedInfo variable, you don't need to loop over each element of your info collection. You could directly do {{(info | filter: {date: selectedInfo: true })[0].Name}}(I'd not prefer to go for this approach).

As you're much interested to take whole element inside ng-model, ng-options can easily achieve(as I said earlier its preferred). In ng-options case you could do {{selectedInfo.Name}}