`select as`

Question

我一直在学习AngularJS，但现在我处于这样的状态 ng-options'值未定义，这些值显示在标签中。

我一直在谷歌搜索几个小时，但是当这样的事情发生时，我没有看到具体的解释。

为了澄清这种情况，这里有一个简化的代码。

<select ng-model="objA[{{$temp}}]" ng-options="i for i in objB[{{$temp}}] track by $index">
</select>
//{{$temp}} is an PHP variable and I'm using laravel. It holds 1.

在Javascript中，

$scope.objA = {1:2};
$scope.objB = {1:[0,1,2]};

我预计会有三个选项，值分别为0,1,2。但结果却是......

<option value="undefined" label="0">0</option>
<option value="undefined" label="1">1</option>
<option value="undefined" label="2">3</option>

任何建议都将不胜感激！

我忘了提一件事......我正在使用laravel，所以$temp必须用大括号。

Answer 1

$scope.objB 不一个数组：包含一个数组。

您应该将其更改为$scope.objB = [0, 1, 2]或将代码更改为

ng-options="i for i in objB.propName[{{$temp}}] track by $index">

Answer 2

Laravel和Angular的

{{ }}是相同的。

Read this学习如何避免这种情况（Meh）。

Answer 3

我看到的问题是ng-model。来自AngularJS网站：

select as

使用select as将绑定select的结果   表达式到模型，但<select>和<option>的值   html元素将是索引（对于数组数据源）或   属性名称（对象数据源）中的值   采集。如果使用track by表达式，则为其结果   表达式将设置为option和select元素的值。

您的objA可以是数组或对象。如果是数组那么你必须使用：label for value in objA 如果是对象，则必须使用：label for (key , value) in objA

请参阅下面的示例：

＆＃13;

angular.module('app', [])
  .controller('HomeController', function($scope) {

    $scope.objA = {
      1: {
        1: 1,
        2: 2,
        3: 3
      }
    };

    $scope.objB = {
      1: [1, 2, 3]
    };
    $scope.selected = 1;
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="HomeController">
  <label>With Object</label>
  <select ng-model="selected" ng-options="key for (key, val) in objA[1]">
</select>

  <label>With Array</label>
  <select ng-model="selected" ng-options="item for item in objB[1]">
</select>
</div>

＆＃13;

Answer 4

观察：使用temp代替{{temp}}

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.temp = 1;
    $scope.objA = {1:2};
    $scope.objB = {1:[0,1,2]};
    $scope.selectedOption = function(item) {
      console.log(item);
    }
});

<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model="objA[temp]" ng-options="i for i in objB[temp]" ng-change="selectedOption(objA[temp])">
</select>
</div>

AngularJS：ng-options的值未定义，它们在标签中

4 个答案:

`select as`