javascript - 我的下拉列表未动态选择

我必须动态选择下拉列表值以更新我的网站中的功能。我也经历了类似的教程，并给出了堆栈溢出问题的答案。

我使用angularjs v1.4.2，到目前为止，我一直尝试下面的代码。

HTML：

<label for="ddlDesignationDepartment"> Department</label>
<select name="ddlDesignationDepartment" ng-model="designation.DepartmentId"
        ng-options="dept.DepartmentId as dept.DepartmentName for dept in departmentList track by dept.DepartmentId" >
</select>
<br/>
<label for="txtDesignationName"> Designation</label>
<input type="text" name="txtDesignationName"
       ng-model="designation.DesignationName"
       placeholder="Designation name"/>
<br/>
<label for="txtDescription"> Description</label>
<input type="text" name="txtDescription"
       ng-model="designation.Description"
       placeholder="Desription"/>

<input type="button" value="{{designation.DesignationId>0?'Update':'Insert'}}"
       ng-click="ManageDesignation(designation)" />

  <table name="tblDesignationResult">
        <tbody ng-if="designationList.length>0">
            <tr ng-repeat="des in designationList">
                <td>
                    {{$index+1}}
                </td>
                <td >
                    {{des.DesignationName}}
                </td>
                <td>
                    {{des.Description}}
                </td>
                <td >
                    {{des.DepartmentName}}
                </td>
                <td>
                    <input type="button" value="Edit" ng-click="EditDesgnation(des)" />
                </td>
            </tr>
        </tbody>
    </table>

AngularJs代码：

(function () {
    'use strict';

    ///Decalre angular controllar for Designation
    angular.module('AngularDemo').controller('DesignationCtrl', ['$scope', '$rootScope', 'DesignationService', 'DepartmentService', DesignationCtrl]);

    ///Designation controllar
    function DesignationCtrl($scope, $rootScope, DesignationService,
          DepartmentService) {
        ///Get or set all Designation
        $scope.designationList = [];

        ///Get or set all Department
        $scope.departmentList = [];



        ///Get or set Designation
        $scope.designation = new Designation();


        ///Retrive all Designation by  DesignationService
        $scope.GetAllDesignations = function () {
            DesignationService.GetAllDesignations().then(function (response) {
                if (response && response.data) {
                    /// Success block
                    if (response.data.Result) {
                        $scope.designationList = angular.copy(response.data.Result);
                    }
                    else {
                        alert(response.data.Message);
                    }
                }
            });
        }
        /// Manage Insert / Update / Delete on specific  Designation by
        ///DesignationService
        $scope.ManageDesignation = function ( des) {
            DesignationService.ManageDesignation(des).then(function (response) {

                if (response && response.data) {
                    /// Success block
                    if (response.data.Result) {
                        $scope.departmentList = angular.copy(response.data.Result);
                    }
                    else {
                        alert(response.data.Message);
                    }
                }
            });
            $scope.Init();
        }

        ///Retrive all Department by  DepartmentService
        $scope.GetAllDepartments = function () {
            DepartmentService.GetAllDepartments().then(function (response) {
                if (response && response.data) {
                    /// Success block
                    if (response.data.Result) {
                        $scope.departmentList = angular.copy(response.data.Result);
                    }
                    else {
                        alert(response.data.Message);
                    }
                }
            });
        }

        ///Edit Designation
        $scope.EditDesgnation = function (des) {
            $scope.designation = des;
        }



        ///Inilise Designation controllar
        $scope.Init = function () {
            $scope.designation = new Designation();
            $scope.GetAllDesignations();
            $scope.GetAllDepartments();


        }
    }


})();
///JavaScript Class of Designation
function Designation() {
     this.DesignationId = 0;
     this.DesignationName='';
     this.Description = '';
     this.DepartmentId = 0;
 }
 Designation.prototype = {
     constructor: Designation
 }

样本数据库

Department{DepartmentId int, DepartmentName varchar(max)}
Designation{DesignationId int,DesignationName varchar(max),Description varchar(max),DepartmentId int}

所有服务工作正常，最初一切都很好，所有数据都显示在结果表中，下拉列表中还显示了所有部门。但是问题是，当我单击“更新”时，将为特定数据填充任何记录文本框值，但未选择“部门下拉列表”值。

最佳答案

在同一表达式中使用select as和by by时要小心。
给定$ scope上的以下项数组：

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

这将起作用：

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];

但这不起作用：

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;

在两个示例中，按表达式跟踪都成功地应用于了项数组中的每个项。由于已在控制器中以编程方式设置了所选选项，因此按表达式跟踪也将应用于ngModel值。在第一个示例中，ngModel的值是items [0]，并且按表达式跟踪的结果为items [0] .id，没有问题。在第二个示例中，ngModel的值是items [0] .subItem，并且按表达式跟踪的结果为items [0] .subItem.id（未定义）。结果，模型值与任何值都不匹配，并且显示为没有选定值

所以您也要改变这个
ng-options="dept.DepartmentId as dept.DepartmentName for dept in departmentList track by dept.DepartmentId

至

ng-options="dept as dept.DepartmentName for dept in departmentList track by dept.DepartmentId

由于dept [0] .DepartmentId.id不存在

关于javascript - 我的下拉列表未动态选择，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57917505/