如何使用angular js选择动态选择选项值

Question

<select  class="select" data-ng-model="sites.webSites.addable.languages"
ng-options="language as language.label for language in languages" >
                                                    </select>

$scope.languages = [
             {
                 value : 'lang_en',
                 label : 'English-en'
             },
             {
                 value : 'lang_es',
                 label : 'Spanish-es'
             },
             ];

单击一个按钮，我必须选择该项目

我已经试过了

var sitevalue = 'lang_es'//dynamic

$('.select').val(sitevalue);

但它不起作用，请提示。

Answer 1

将您的选择更改为以下内容：

<select data-ng-model="sites.language"
    ng-options="language.value as language.label for language in languages" ></select>

然后，这应该在您的控制器内部起作用：

sites.language = 'lang_es'

这是一个工作的jsfiddle

更新：

当您将language as language.label for ...编写language as language.label for ...您是在告诉angular将ng-model映射到类似{ value : '...', label : '...' } 。 每个参考都会对其进行跟踪，这意味着您必须将指定的实例完全分配给ng-model。 这是来自角度团队的jsfiddle对此进行了说明。

您可以通过在ng-options内部使用以下内容来使用简单的赋值来评估属性值，以取消所选的值： language.value as language.label for ...

而且您不想编写jquery选择器或操作DOM，请尝试避免$('.select').val(sitevalue); 使用角钢时。 改用本机js模型，然后依靠框架来完成其余的工作。

Answer 2

您应该将模型设置为要选择的确切对象（通过引用），而不仅是值。

使您像这样的HTML：

  <body ng-controller="TestCtrl">
    <select  class="select" ng-options=" language.label for language in languages" ng-model="selectedValue"></select>
    <button ng-click="selectedValue = defaultValue">Select Default</button>
  </body>

和您的控制器是这样的：

function TestCtrl($scope) {
  $scope.languages = [
   {
       value : 'lang_en',
       label : 'English-en'
   },
   {
       value : 'lang_es',
       label : 'Spanish-es'
   },
   ];
   $scope.selectedValue = {};
   $scope.defaultValue = $scope.languages[1];
}

这样就可以了。 工作的plunkr： http ://plnkr.co/edit/8HrQUGMx4jGmJv3fbdDq?p=preview

Answer 3

$scope.sites.webSites.addable.languages = 'lang_es';

选择的值与data-ng-model相关联

Answer 4

ng-options应该是“ language.value as language.language.language.value for language for language”。
data-ng-model（或仅ng-model）应为“ selectedLanguageValue”。
在控制器中，获取$ scope.selectedLanguageValue的值。

如何使用angular js选择动态选择选项值

问题描述

4 个解决方案

解决方案1
3 已采纳 2014-09-09 10:25:03

解决方案2
1 2014-09-09 10:30:08

解决方案3
0 2014-09-09 10:20:43

解决方案4
0 2014-09-09 10:25:35

如何使用angular js选择动态选择选项值

问题描述

4 个解决方案

解决方案1 3 已采纳 2014-09-09 10:25:03

解决方案2 1 2014-09-09 10:30:08

解决方案3 0 2014-09-09 10:20:43

解决方案4 0 2014-09-09 10:25:35

解决方案1
3 已采纳 2014-09-09 10:25:03

解决方案2
1 2014-09-09 10:30:08

解决方案3
0 2014-09-09 10:20:43

解决方案4
0 2014-09-09 10:25:35