AngularJS:如何为select元素设置默认值?

时间:2015-05-12 17:11:18

标签: html angularjs select ng-options

我几乎是AngularJS的新手,我正在使用select标签进行选择。我想要的是为我的选择标记设置一个默认值(即 admin )来定义我的用户的角色,代理 admin

这是我的HTML代码:

<div class="row">
    <div class = "form-group col-xs-12 col-md-6">
        <label>
            Role 
        </label>
        <select class="form-control" ng-options="value for value in roles" ng-model="newStaff.role_name='agent'"></select>
    </div>
</div>

这是我的控制器代码:

controllers.controller('StaffMembersNewCtrl', function ($scope, StaffMembers, $state) {
    $scope.roles = ['admin', 'agent'];
    StaffMembers.query(function(responce) {
        $scope.staffs = responce;
    });
    $scope.SaveNewStaffMember = function(){
        StaffMembers.save($scope.newStaff, function(){
        $scope.addAlert('success', 'New staff member was added successfully!');
        $state.go('staffMembersSettings');
     });
    };
});

看起来很有效,我有一个默认值,数据是绑定的,但浏览器中有错误。

Error: [ngModel:nonassign] Expression 'newStaff.role_name='agent'' is non-assignable. Element: <select class="form-control ng-pristine ng-untouched ng-valid" ng-options="value for value in roles" ng-model="newStaff.role_name='agent'">

我理解这个错误,但我无法为我的问题找到替代解决方案,即为我的选择标记设置默认值。

2 个答案:

答案 0 :(得分:1)

您可以使用JS或HTML定义默认值。您尝试使用ng-model的方式表明您希望在HTML中定义默认值。 ng-init是一种方法(你实际上使用ng-model就像使用ng-init一样)。将ng-model视为一种“地址”,将角度指向要存储选择的位置,而不是要存储在那里的内容。

由于您的数据模型是在JS中,我建议您在那里进行,以便您可以在$ scope.roles中引用相应的角色名称

HTML

<select class="form-control" ng-options="value for value in roles" ng-model="newStaff.role_name"></select>

CONTROLLER

$scope.newStaff = {role_name: $scope.roles[0]};

答案 1 :(得分:0)

试试这个..

<div class="row">
    <div class = "form-group col-xs-12 col-md-6">
        <label>
            Role 
        </label>
        <select class="form-control" ng-options="value for value in roles" ng-model="newStaff.role_name" ng-init="newStaff.role_name=roles[1]"></select>
    </div>
</div>