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

Question

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 1

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