Question

我用了这个答案：

Working with select using AngularJS's ng-options

尝试获取要从我的AddCtrl控制器填充的选项的下拉列表：

$scope.newMeal = {};

        $scope.newMeal = {
            name: "",
            price: "",
            ingredients: "",
            description: "",
            category: "",
            cuisine: ""
        };

        $scope.categories = [
            { id: 1, name: 'Breakfast' },
            { id: 2, name: 'Lunch' },
            { id: 3, name: 'Dinner' }
        ];

        $scope.cuisines = [
            { id: 1, name: 'Thai' },
            { id: 2, name: 'Chinese' },
            { id: 3, name: 'Italian' },
            { id: 4, name: 'British' },
            { id: 5, name: 'Spanish' },
            { id: 6, name: 'Indian' },
            { id: 7, name: 'French' },
            { id: 8, name: 'Vietnamese' },
            { id: 9, name: 'Nordic' }
        ];

进入我的表格：

<div class="list list-inset">
                    <label class="item item-input item-select">
                        <div class="input-label">
                            Category
                        </div>
                        <select ng-model="newMeal.category" ng-options="category as categories.name for category in categories">
                            <option value="" ng-if="newMeal.category">&nbsp;</option>
                        </select>
                    </label>
                    <label class="item item-input item-select">
                        <div class="input-label">
                            Cuisine
                        </div>
                        <select ng-model="newMeal.cuisine" ng-options="cuisine as cuisines.name for cuisine in cuisines">
                            <option value="" ng-if="newMeal.cuisine">&nbsp;</option>
                        </select>
                    </label>
                </div>

但是我得到要填充的值的数量才会出现，它们在选项下拉列表中都显示为“未定义”。我怎样才能解决这个问题？注意如果没有选择任何内容，我希望没有任何值，并且当单击任何内容时，此默认值无消失。

Answer 1

实际上，你犯了一个小错误：

你在ngOptions中编写表达式的地方：

category as categories.name for category in categories

cuisine as cuisines.name for cuisine in cuisines

你可以使用：

category.name for category in categories

cuisine.name for cuisine in cuisines

请记住，默认情况下，当表达式中没有“as”时，整个对象将被绑定到ngModel中定义的$ scope变量。这样，您不需要将category声明为category.name，将cuisine声明为cuisine.name。

如果您只想绑定类别和美食的名称，您还可以使用：

category.name as category.name for category in categories
cuisine.name as cuisine.name for cuisine in cuisines

另一个重要的事情是ngModel已经初始化了值，这样你就不需要在控制器中声明：

$scope.newMeal = {}; // In this case this is useless because you are defining this property again in the next line.
$scope.newMeal = {
  name: "",
  price: "",
  ingredients: "",
  description: "",
  category: "",
  cuisine: ""
};

如果您需要，请让ngModel为您初始化它。

以下是最终代码：

控制器

$scope.categories = [
    { id: 1, name: 'Breakfast' },
    { id: 2, name: 'Lunch' },
    { id: 3, name: 'Dinner' }
];

$scope.cuisines = [
    { id: 1, name: 'Thai' },
    { id: 2, name: 'Chinese' },
    { id: 3, name: 'Italian' },
    { id: 4, name: 'British' },
    { id: 5, name: 'Spanish' },
    { id: 6, name: 'Indian' },
    { id: 7, name: 'French' },
    { id: 8, name: 'Vietnamese' },
    { id: 9, name: 'Nordic' }
];

查看

<div class="list list-inset">
    <label class="item item-input item-select">
        <div class="input-label">
            Category
        </div>
        <select ng-model="newMeal.category" ng-options="category.name for category in categories">
            <option value="" ng-if="newMeal.category">&nbsp;</option>
        </select>
    </label>
    <label class="item item-input item-select">
        <div class="input-label">
            Cuisine
        </div>
        <select ng-model="newMeal.cuisine" ng-options="cuisine.name for cuisine in cuisines">
            <option value="" ng-if="newMeal.cuisine">&nbsp;</option>
        </select>
    </label>
</div>

Answer 2

问题在于，您通过对两个地方使用'category'来覆盖select语句中变量'category as'的'category for'变量。即。

category as category.name for category in categories

使用以下代码使其正常工作

<select ng-model="newMeal.category" ng-options="category as cat.name for cat in categories">
      <option value="" ng-if="newMeal.category">&nbsp;</option>
</select>

和美食这一个：

<select ng-model="newMeal.cuisine" ng-options="cuisine as cuis.name for cuis in cuisines">
        <option value="" ng-if="newMeal.cuisine">&nbsp;</option>
</select>

这是一个有效的JSBIN

从控制器填充值时，Angular选项数组未定义

2 个答案: