Question

我创建了一个名为Item1的对象，我想在下面的HTML中创建名为field1和field2的2个子字段：

对于field1：

<input ng-model="myItem.field1"></input>

对于field2：

<select ng-model="myItem.field2" ng-init="myItem.field2=fieldOptions[0]" ng-options="val for myItem.field2 in fieldOptions" ng-change="changed(myItem)"></select>

检查一下，我想将select form初始化为名为fieldOptions的数组的第一个元素。我将字段选项定义如下：

$scope.fieldOptions = [ 'opt1', 'opt2', 'opt3' ];

当我运行此代码时，出现以下错误：

Error: [ngOptions:iexp] http://errors.angularjs.org/1.2.16/ngOptions/iexp?p0=myItem.field2NaNor%20myItem.field2%in%20policyNames&p1=%3Cselect%20ng-model%3D%22myItem.field2%22%20ng-init%3D%22myItem.field2%3DfieldOptions%5B0%5D%22%20ng-options%3D%22myItem.field2%for%20myItem.field2%in%20policyNames%22%20ng-change%3D%changed(myItem)%22%20class%3D%22ng-pristine%20ng-valid%22%3E
    at Error (native)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:6:450
    at n (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:205:427)
    at link (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:207:462)
    at J (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:53:345)
    at f (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:46:399)
    at f (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:46:416)
    at J (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:53:286)
    at f (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:46:399)
    at f (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:46:416) angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
J angular.js:6582
f angular.js:5986
f angular.js:5989
J angular.js:6573
f angular.js:5986
f angular.js:5989
(anonymous function) angular.js:5891
(anonymous function) angular.js:1384
h.$eval angular.js:12412
h.$apply angular.js:12510
(anonymous function) angular.js:1382
d angular.js:3869
$b.c angular.js:1380
$b angular.js:1394
Wc angular.js:1307
(anonymous function) angular.js:21459
fire jquery-2.1.0.js:3047
self.fireWith jquery-2.1.0.js:3159
jQuery.extend.ready jquery-2.1.0.js:3365
completed

据我所知，AngularJs编译器不喜欢ng-options定义。因为，将myItem.field2替换为名为otherfieldname的其他字段名称时，如下所示：

<select ng-model="otherFieldName" ng-init="otherFieldName=fieldOptions[0]" ng-options="otherFieldName for otherFieldName in fieldOptions" ng-change="changed(myItem)"></select>

它按预期工作。不知何故，当我使用点分隔的模型名称时，会导致错误。

我还检查了this文档，了解为Select菜单设计的指令。在ng-options部分中，以下表单对阵列数据源有效：

label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in {{ 1}} array track by

据我了解，trackexpr适合我。在我的案例中，label for value in array是Array。但$scope.fieldOptions和label应该是什么？它们必须相同或不同吗？为什么我不应该为value和label（ ie。 myItem）使用点分隔模型。

你有什么想法吗？

提供了JSFiddle here。

Answer 1

您感到困惑ng-model和ng-options

ng-options仅用于构造选项。语法可能有点令人困惑，但它告诉角度如何查看您的数组。

使用简单的一维数组你想要的是：

ng-options="val for val in fieldOptions"

其中fieldOptions是范围数组。

变量名称val可以是您想要的任何内容，例如foo for foo in fieldOptions

的 DEMO

Answer 2

您的代码存在许多问题。主要问题似乎是您将列表项视为对象数组（＆＃34; field1＆＃34;＆＃34; field2＆＃34;），但是当您创建列表时，它＆＃ 39; s只是一个字符串数组。

我也看到你在使用ng-init时所遇到的问题，而且我不确定ng-model或你的ng-change功能是否正在做你想要的。

我把你的小提琴固定在我认为你要去的地方：

http://jsfiddle.net/3HeFB/10/

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

myApp.controller("MainCtrl", ["$scope", function ($scope) {
    console.log("Main Controller loaded.");

    //create objects instead of strings
    $scope.fieldOptions = [{
        field1: 'opt1',
        field2: 'opt1Text'
    }, {
        field1: 'opt2',
        field2: 'opt2Text'
    }];    
    //default the var you use in ng-model to first item
    $scope.myItem = $scope.fieldOptions[0];
    console.log($scope.fieldOptions[0]);
    //change function does not get parameter passed
    $scope.changed = function () {
        console.log("Field2 changed.");
        console.log($scope.myItem);
    };
}]);

AngularJS ng-option

2 个答案: