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>

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

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" 将在您的 select 上启用双向绑定，并且 selected 值将在 selectedInfo $scope 变量中可用。~~

使用 ng-options

处理带有选项的 select 的首选方法

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

为了显示 selected 到现在为止，您可以使用 selectedInfo 变量，您不需要遍历 info 集合的每个元素。您可以直接执行 {{(info | filter: {date: selectedInfo: true })[0].Name}}（我不喜欢采用这种方法）。

由于您很想将整个元素放入 ng-model，ng-options 可以轻松实现（正如我之前所说，它是首选）。在 ng-options 情况下你可以做 {{selectedInfo.Name}}

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

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

javascript

angularjs

ng-options

angularjs-ng-options