如何使用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'
             },
             ];

Clicking on a button I have to make the item selected 单击一个按钮，我必须选择该项目

I have tried like this 我已经试过了

var sitevalue = 'lang_es'//dynamic

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

But it is not working ,please suggest. 但它不起作用，请提示。

Answer 1

Change your select to something like this: 将您的选择更改为以下内容：

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

Then this should work inside your controller: 然后，这应该在您的控制器内部起作用：

sites.language = 'lang_es'

Here is a working jsfiddle 这是一个工作的jsfiddle

Update: 更新：

When you are writing language as language.label for ... you are telling angular to map ng-model to object like { value : '...', label : '...' } . 当您将language as language.label for ...编写language as language.label for ...您是在告诉angular将ng-model映射到类似{ value : '...', label : '...' } 。 Which would be tracked per reference, means you have to assign to ng-model exacltly the same instance that you specified. 每个参考都会对其进行跟踪，这意味着您必须将指定的实例完全分配给ng-model。 Here is jsfiddle from angular team illustrating this. 这是来自角度团队的jsfiddle对此进行了说明。

You can use simple assignments to value propery to cange selected value by using this inside ng-options: language.value as language.label for ... 您可以通过在ng-options内部使用以下内容来使用简单的赋值来评估属性值，以取消所选的值： language.value as language.label for ...

And you don't want to write jquery selectors or manipulate DOM, try avoid $('.select').val(sitevalue); 而且您不想编写jquery选择器或操作DOM，请尝试避免$('.select').val(sitevalue); when using angular. 使用角钢时。 Use native js-models instead and rely on framework to do the rest. 改用本机js模型，然后依靠框架来完成其余的工作。

Answer 2

Your model should be set to the exact object (by reference) that you would like to select, not only to the value. 您应该将模型设置为要选择的确切对象（通过引用），而不仅是值。

Make you HTML like this: 使您像这样的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>

and your controller like this: 和您的控制器是这样的：

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

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

Answer 3

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

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

Answer 4

ng-options should be "language.value as language.label for language in languages". ng-options应该是“ language.value as language.language.language.value for language for language”。
data-ng-model (or just ng-model) should be "selectedLanguageValue". data-ng-model（或仅ng-model）应为“ selectedLanguageValue”。
In the controller, get the value of $scope.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