无法设置的NG选项选择的值 [英] Can't set selected value of ng-options

问题描述

我想填充一个下拉列表中选择选项列表，并使用NG-模型和NG-选项设置默认选择的值。

我有以下的code在我看来：

 ＆LT;选择NG模型=thisTour.siteNG选项=site.name站点在站点列表＆GT;＆LT; /选择＆GT;
 

在我的控制器：

  $ scope.siteList = [
        {ID：1，名称：骑自行车}，
        {ID：2，名称：'走'}，
        {ID：3，名称：'节假日'}
    ]    $ scope.thisTour.site = {ID：2，名称：'走'};
 

该列表得到填充了站点列表对象正确的3个选项，但它没有选择的走的默认情况下，我会期望？为什么不呢？

现在，当我改变这样的：

  $ scope.thisTour.site = {ID：2，名称：'走'};
 

要这样：

  $ scope.thisTour.site = $ scope.siteList [1];
 

现在它的作品。为什么？是不是一回事？

解决方案

这是因为看上去棱角分明对象的平等与你的语法和inyour情况下 $ scope.siteList [1] 不等于 {ID：2，名称：'走'}; （2对象是只有当它们指向同一个参考相等）。你可以解决这个问题的方法很多，一个简单的方法是通过 ID 轨道由语法NG-选项指定轨道$ C>，这将使NG选项的选项设置为绑定对象的指定属性而不是对象引用本身进行跟踪。

 ＆LT;选择NG模型=thisTour.site
    NG-选项=site.name由site.id在站点列表轨道站点＆GT;＆LT; /选择＆GT;
 

您也可以使用语法来最小设定NG-模型中使用只指定ID的选择为的在语法部分： -

例如： -

  NG选项=site.id作为site.name在站点列表的网站
 

和模型也只是： -

  $ scope.thisTour.site = 2;
 

\r

\r

angular.module（应用，[]）。控制器（CTRL ，功能（$范围）{\r
  $ scope.thisTour = {};\r
 $ scope.siteList = [\r
        {ID：1，名称：骑自行车}，\r
        {ID：2，名称：'走'}，\r
        {ID：3，名称：'节假日'}\r
    ]\r
\r
    $ scope.thisTour.site = {ID：2，名称：'走'};\r
}）

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=CTRL＆GT;\r
  ＆LT;选择NG模型=thisTour.siteNG选项=site.name在站点列表曲目由site.id网站＆GT;＆LT; /选择＆GT;\r
  {{thisTour.site}}\r
  ＆LT; / DIV＆GT;

\r

\r

\r

通过文档

  

trackexpr： - 使用对象数组时使用。这个前pression的结果将被用来识别所述阵列中的对象。该trackexpr将最有可能引用变量的值（例如value.propertyName）。有了这个选择，甚至pserved $ P $当选项重新创建（例如从服务器重新加载）。

另外值得注意的：

  

不要使用选择的和在同前pression跟踪由。它们不是设计一起工作。

I am trying to populate a drop-down select options list and set a default selected value using ng-model and ng-options.

I have the following code in my view:

<select ng-model="thisTour.site" ng-options="site.name for site in siteList"></select>

And in my controller:

    $scope.siteList = [
        { id: 1, name: 'cycling'},
        { id: 2, name: 'walking'},
        { id: 3, name: 'holidays'}
    ]

    $scope.thisTour.site = { id: 2, name: 'walking'};

The list is getting populated with the correct 3 options from the siteList object, but it is not selecting walking by default as I would expect? Why not?

Now, when I change this:

$scope.thisTour.site = { id: 2, name: 'walking'};

To this:

$scope.thisTour.site = $scope.siteList[1];

Now it works. Why? Isn't it the same thing?

解决方案

That is because angular looks for object equality to bind it with your syntax and inyour case $scope.siteList[1] is not equal to { id: 2, name: 'walking'}; (2 objects are equal only if they point to the same reference). You can get around this in many ways, one easy way is to use track by syntax with ng-options to specify track by id, which will enable ng-option's options to be tracked by the specified property of the bound object rather than the object reference itself.

<select ng-model="thisTour.site" 
    ng-options="site.name for site in siteList track by site.id"></select>

You could also use the syntax to minimally set the ng-model to specify only the id using select as part in the syntax:-

Example:-

ng-options="site.id as site.name for site in siteList"

and model would just be:-

 $scope.thisTour.site = 2;

angular.module('app', []).controller('ctrl', function($scope){
  $scope.thisTour = {};
 $scope.siteList = [
        { id: 1, name: 'cycling'},
        { id: 2, name: 'walking'},
        { id: 3, name: 'holidays'}
    ]

    $scope.thisTour.site = { id: 2, name: 'walking'};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-model="thisTour.site" ng-options="site.name for site in siteList track by site.id"></select>
  {{thisTour.site}}
  </div>

From documentation

trackexpr: - Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.propertyName). With this the selection is preserved even when the options are recreated (e.g. reloaded from the server).

Also worth noting:

Do not use select as and track by in the same expression. They are not designed to work together.

这篇关于无法设置的NG选项选择的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！