AngularJS：如何为 select 元素设置默认值？

Question

我几乎是 AngularJS 的新手，我正在为 selection 使用 select 标签。我想要的是为我的 select 标签设置一个默认值（即 admin）来定义我的用户的角色，即 agent 和 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'">

我理解这个错误，但我找不到替代解决方案来解决我的问题，即为我的 select 标签设置默认值。

Answer 1

您可以在 JS 或 HTML 中定义默认值。您尝试使用 ng-model 的方式表明您想要在 HTML 中定义默认值。 ng-init 将是一种方法来做到这一点（你实际上使用 ng-model 就像使用 ng-init 一样）。将 ng-model 视为一种 "address"，它指向 angular 您想要存储选择的位置，而不是您想要存储的内容。

由于您的数据模型是在 JS 中，我建议您改为在 JS 中这样做，以便您可以在 $scope.roles

中引用适当的角色名称

HTML

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

控制器

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

Answer 2

试试这个..

<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>

AngularJS：如何为 select 元素设置默认值？

AngularJS: how to have default value for select element?

html

select

angularjs

ng-options