Angular 填充来自控制器的值时选项数组未定义

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>

但是我得到了要填写的值的数量，它们在选项下拉列表中都显示为 "undefined"。我怎样才能解决这个问题？请注意，如果未选择任何内容，我希望没有任何值，并且此默认 none 值在单击任何内容时消失。

Answer 1

问题是您在 select 语句中通过在两个地方使用 'category' 来用变量 '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

Answer 2

其实，你犯了一个小错误：

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

Angular 填充来自控制器的值时选项数组未定义

Angular option array getting undefined when filling in values from controller

angularjs

controller

ionic-framework

html-select