使用AngularJS的双向数据绑定设置SELECT的默认值

Set default value on SELECT using two way data binding of AngularJS

本文关键字：设置 SELECT 数据绑定 默认值 AngularJS 使用      更新时间：2023-09-26

场景:我需要使用AngularJS在SELECT标签中显示一个数据列表。由于AngularJS允许双向数据绑定，我希望它的行为不需要额外的努力。以下是我所采用的方法。

Model
 public class Department
    {
        public int? DepartmentId { get; set; }
        public string DepartmentName { get; set; }
    }
Query to get the data
 Departments = user.Departments.Select(x=> new Department {DepartmentId= x.UserID,DepartmentName= x.FirstName}).OrderByDescending(x=>x.DepartmentName)

赋值给$scope

 $scope.loadData = function () {
                $http.get(baseurl.resolve("~/api/users/getbyid?userId=" + userId)).success(function (data) {
                    $scope.DepartmentID = data.DepartmentID;
                    $scope.profile = data;
                });
            };

SELECT

   $scope.selectDepartment = function (selectedDepartment) {
        $scope.profile.DepartmentID = selectedDepartment;
    };

将数据绑定到UI

          <select data-ng-model="DepartmentID" data-ng-selected="0" data-ng-change="selectDepartment(DepartmentID)" data-ng-options="department.DepartmentId as department.DepartmentName for department in profile.Departments">

这似乎不是一个香草的方法，我需要为我设置这个$scope.profile.DepartmentID = selectedDepartment;来获得所选的值。是否存在以另一种方式更新值的适当方法?

试试这个

$scope.selectDepartment = function (selectedDepartment) 
{
        $scope.DepartmentID = selectedDepartment;
};

删除ng-change from so now is

<select data-ng-model="DepartmentID" data-ng-selected="0" data-ng-options="department.DepartmentId as department.DepartmentName for department in profile.Departments">

假设您想将从下拉列表中选择的DepartmentId放到一个名为$scope.profile.DepartmentID的变量中。

在本例中，您需要输入ng-model = "profile "。department " for SELECT元素

检查ng-bind="profile "。departmentd"到某个元素。这里可以看到更新后的departmentd。

相关文章：