首页 > 解决方案 > 如何为Angularjs选择动态设置值?

问题描述

在 Angularjs 中,我尝试从程序中动态设置选项。但是,我无法设置。

请支持。

验证评论的参考链接以获取更多详细信息。

提前致谢!

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        "AngularJS select example"
        <br />
         <br />
        <select ng-model="mail_notification" ng-change="plotRulegraph()">
           <option ng-selected="{{ option.key == mail_notification }}"
                   ng-repeat="option in mail_notifications"
                   value="{{option.key}}">
             {{option.value}}
           </option>
        </select>
        <br />                
    </div>
</div>
app.controller('AppCtrl', function($scope){
    $scope.mail_notifications = [
        {
            "key": 0,
            "value": "For any event on all my projects"
        },
        {
            "key":1,
            "value": "For any event on the selected projects only..."
        },
        {
            "key": 2,
            "value": "Only for things I watch or I'm involved in"
        },
        {
            "key": 3,
            "value": "Only for things I am assigned to"
        }
    ];
    $scope.mail_notification = 3;

     $scope.plotRulegraph = function() {
            $scope.mail_notification=2;
     }
});

标签: javascriptangularjsselectangularjs-select

解决方案


不要ng-selectedng-model.

当值是字符串以外的类型时,使用ng-value指令:

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        "AngularJS select example"
        <br />
         <br />
        <select ng-model="mail_notification" ng-change="plotRulegraph()">
           <option ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶{̶{̶ ̶o̶p̶t̶i̶o̶n̶.̶k̶e̶y̶ ̶=̶=̶ ̶m̶a̶i̶l̶_̶n̶o̶t̶i̶f̶i̶c̶a̶t̶i̶o̶n̶ ̶}̶}̶"
                   ng-repeat="option in mail_notifications"
                   ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶o̶p̶t̶i̶o̶n̶.̶k̶e̶y̶}̶}̶"̶
                   ng-value="option.key">
             {{option.value}}
           </option>
        </select>
        <br />                
    </div>
</div>

使用双花​​括号插值{{ }},将值转换为字符串。该<select>指令在比较值时使用严格相等。数字键不等于字符串键。该ng-value指令保留正确的类型。

从文档:

注意:ngSelected不与<select>andngModel指令交互,它只在元素上设置 selected 属性。如果您在ngModel上使用,则<select>不应ngSelected在选项上使用,因为ngModel将设置<select>值和选定的选项。

AngularJSng-selected指令 API 参考

有关详细信息,请参阅


更新

该示例需要 AngularJS V1.5 或更高版本。

PLNKR 上的演示。


推荐阅读