Question

我正在尝试构建一个允许用户从一组选项中进行选择的数组。我有一个通用的对象数组，当我向模型添加一个新项目时，我可以选择其中一个对象。

我遇到的问题（我相信）是我用来填充项目列表的ng-options一旦用户做出选择就会被清除。我不确定如何保留完整的对象列表，以便用户可以根据需要改变主意。

我整理了一份我正在尝试做的事情的快速示例 - http://jsfiddle.net/b0kwx1nj/

我很感激任何人都可以提供帮助。

角：

var myApp = angular.module('myApp', []);
function ToppingCtrl($scope) {
  $scope.toppings = [{
    name: 'Cheese',
    price: 0.5
  }, {
    name: 'Ham',
    price: 1.5
  }, {
    name: 'Sauce',
    price: 0.25
  }];
  $scope.myToppings = [];

  $scope.addTopping = function() {
    var newTopping = angular.copy($scope.toppings);
    $scope.myToppings.push(newTopping);
  }
}

HTML：

<div ng-controller="ToppingCtrl" class="container">
    <table>
        <tr>
            <th>Topping</th>
            <th>Price</th>
        </tr>
        <tr ng-repeat="item in myToppings track by $index">
            <td>
                <select
                    id="top_{{$index}}"
                    name="top_{{$index}}"
                    title="top_{{$index}}"
                    ng-model="myToppings[$index]"
                    ng-options="topping.name for topping in myToppings[$index]"
                >
                    <option value=''>-- select --</option>
                </select>
            </td>
            <td>{{myToppings[$index].price}}</td>
        </tr>
    </table>
    <button ng-click="addTopping()">Add topping</button>
</div>

Answer 1

它被清除的原因是addTopping()将myToppings[$index]转换为包含toppings中3个元素的数组，该数组显示为下拉列表。

只要在下拉菜单中进行选择，它就会转换为单个元素（不再是数组） - 这就是为什么值不会粘住的原因。您应该将ng-options与toppings关联起来，而不是myToppings[$index]来纠正错误。而且，您只需更改addToppings()即可向myToppings[]添加新的空对象。

这是您的新代码：

HTML：

<select
id="top_{{$index}}"
name="top_{{$index}}"
title="top_{{$index}}"
ng-model="myToppings[$index]"
ng-options="topping.name for topping in toppings"
>
    <option value=''>-- select --</option>
</select>

角：

$scope.addTopping = function() {
var newTopping = {};
$scope.myToppings.push(newTopping);
}

希望它有所帮助。

Answer 2

更改ng-options以返回整个topping对象，并使用as label子句在选择器中显示顶部名称：

<tr ng-repeat="item in myToppings track by $index">
    <td>
        <select
            id="top_{{$index}}"
            name="top_{{$index}}"
            title="top_{{$index}}"
            ng-model="item"
            <!-- REPLACE
            ng-options="topping.name for topping in myToppings[$index]"
            -->
            <!-- INSTEAD -->
            ng-options="topping as topping.name for topping in toppings"

            <option value=''>-- select --</option>
        </select>
    </td>
    <td>{{item.price}}</td>
</tr>

DEMO on JSFiddle

使用AngularJS中的select和对象构建数组

2 个答案: