预先分配的AngularJS ng-repeat模型值答案

【问题标题】：AngularJS ng-repeat model value preassigned预先分配的AngularJS ng-repeat模型值
【发布时间】：2015-07-11 15:17:54
【问题描述】：

我有以下 HTML 模板和一些要在输入中显示的数据。我喜欢在加载时在模板中显示这些数据

<div class="panel panel-default" ng-repeat="option in optionslist">
                    <div class="panel-body">
                        <div class="control-group">
                            <label>Airline</label>
                            <select class="form-control" ng-options="airline.id as airline.name for airline in airlinesList"
                                    ng-model="selected.airline" ng-change="selectedAirlines(airline, $index)">
                                <option value="">Choose Airline</option>
                            </select>
                        </div>
                        <div class="control-group">
                            <label>Cost</label>
                            <input type="number" class="form-control" placeholder="Cost" ng-model="selected.cost"
                                   ng-blur="travelCost(cost, $index)">
                        </div>
                        <div class="control-group">
                            <label>Discount</label>
                            <input type="number" class="form-control" placeholder="Discount" ng-model="selected.discount"
                                   ng-blur="travelDiscount(discount, $index)">
                        </div>
                    </div>
                </div>

我想在上面的模板中预先填充下面的 serviceData 值。

$scope.optionslist = [1, 2];
$scope.selected ={};
$scope.serviceData = [
                    {
                        "airline": 3,
                        "cost": 12345,
                        "discount": 3212

                    },
                    {
                        "airline": 1,
                        "cost": 4321,
                        "discount": 213

                    }
                ];

这里是 ng-options 列表

$scope.airlinesList = [
        {
            "id": 1,
            "name": 'Emirates Airline'
        },
        {
            "id": 2,
            "name": 'Saudi Arabian Airlines'
        },
        {
            "id": 3,
            "name": 'Qatar Airways'
        },
        {
            "id": 4,
            "name": 'AirAsia'
        }
    ];

【问题讨论】：

您应该在页面加载时在控制器中分配模型值。没有其他方法可以做到这一点。 Angular js 是客户端编程。我所做的还有另一种方式。我来自服务器请求的json_encode 数据并将它们保存在window 对象下。当ng-app 初始化时，我在相应的模型中分配了这些值。
你为什么不重复serviceData 而不是optionsList？不完全清楚你想要什么。在 plunker 中创建一个演示以及更好地解释期望
如何使用 ng-repeat 中的值更新模型
这里是链接plnkr.co/edit/Gtf1Hesril52NsHuscGU?p=preview我想在点击预设时更新模型

标签： javascript angularjs angularjs-ng-repeat angular-ngmodel

【解决方案1】：

您正在使用 ng-repeat 并将所有内容绑定到同一个选定对象。选择的应该是一个对象数组。

$scope.selected = [{
    "airline": 3,
    "cost": 12345,
    "discount": 3212
  }, {
    "airline": 1,
    "cost": 4321,
    "discount": 213
  }];

如果你像上面那样设置选定的数组，如果你像这样绑定到数组，它将预先填充表单：

 <select class="form-control" ng-options="airline.id as airline.name for airline in airlinesList" 
         ng-model="selected[$index].airline" ng-change="selectedAirlines(airline, $index)">
     <option value="">Choose Airline</option>
 </select>

您需要在您使用的每个输入字段中绑定到selected[$index]。

这是一个笨拙的例子：http://plnkr.co/edit/aLQcU0Y2vgNRUpev66yg?p=preview

【讨论】：