javascript - AngularJS:调整 ng-model 与 ng-repeat 一起工作

Question

我有以下代码:

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

抱歉转储问题。这很简单，我希望我的表格根据选定的日期显示数据。请帮我弄清楚。

Answer 1

ng-model应该在 select 上不在 option标签。作为ng-model只处理 input , textarea , select盒子外面。

标记

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

哪里ng-model="selectedInfo"将启用对您的选择的双向绑定(bind)，并且所选值将在 selectedInfo 中可用$scope 变量。

---

使用 ng-options 处理 select with option 的首选方法

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

要显示所选日期，您可以使用 selectedInfo变量，您不需要遍历 info 的每个元素收藏。你可以直接做 {{(info | filter: {date: selectedInfo: true })[0].Name}} (我不想采用这种方法)。

因为你很想把整个元素放在里面 ng-model , ng-options可以轻松实现(正如我之前所说的首选)。在 ng-options 情况下你可以做 {{selectedInfo.Name}}