AngularJS - 使用 ngRepeat 的下拉菜单

Posted 2023-05-09

【中文标题】AngularJS - 使用 ngRepeat 的下拉菜单

【英文标题】：AngularJS - dropdown menu using ngRepeat

【发布时间】：2017-09-21 04:04:46

【问题描述】：

我一直在做一个项目并尝试使用 AngularJs 创建一个下拉菜单。但我无法在菜单上选择employeeId 信息。如果需要更多代码细节，我可以添加。

这里是image of dropdownmenu

删除.html

     <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="drop">
            selectedItem
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li ng-repeat="a in emps">
                <a ng-click="dropboxitemselected(a)">a.Id</a>
            </li>
        </ul>
    </div>

Demo.js

MyApp.controller("DeleteController", function ($scope, EmpApi) 
    $scope.selectedItem = "Select Employee";
    $scope.isDeleteItemVisible = false;
    getEmployees();
    function getEmployees() 
        EmpApi.getEmployees().then(function (response) 
            $scope.emps = emps;
        )
        .catch(function (error) 
            $scope.status = 'Unable to load emp data:' + error.message;
        )
    ;
    $scope.dropboxitemselected = function (item) 
        $scope.selectedItem = item.Id;
        $scope.name = item.Name;
        $scope.age = item.Age;
        $scope.sal = item.Salary;
        $scope.empid = item.Id;
        $scope.isDeleteItemVisible = true;
    ;
    $scope.DeleteEmp = function () 
        var empToDelete = 
            'Id': $scope.empid
        ;
        EmpApi.DeleteEmployee(empToDelete)
                .then(function (response) 
                    alert("user deleted");
                    $scope.name = undefined;
                    $scope.age = undefined;
                    $scope.sal = undefined;
                    $scope.empid = undefined;
                    $scope.selectedItem = "Select Employee";
                    $scope.isDeleteItemVisible = false;
                    getEmployees();
                )
            .catch(function (response) 
                alert("error in deleting");
            );
    
);

【问题讨论】：

不确定这是否是问题的一部分，但在您的getEmployees 函数中，您分配了$scope.emps = emps，但您没有将emps 作为.then 中的参数传递回调函数。你正在传递response。

【参考方案1】：

第一个错误，您在定义之前调用了getEmployees()。 在定义函数后添加行。我建议您将其添加为控制器定义中的最后一行，以使其更清晰。

第二个错误出现在 EmpApi.getEmployees() 承诺中，您在其中设置了 $scope.emps = emps;，其中未定义 emps。 根据您的实现设置$scope.emps = response 或$scope.emps = response.data

控制器：

MyApp.controller("DeleteController", function ($scope, EmpApi) 
    $scope.selectedItem = "Select Employee";
    $scope.isDeleteItemVisible = false;

    function getEmployees() 
        EmpApi.getEmployees().then(function (response) 
            $scope.emps = response;
        )
        .catch(function (error) 
            $scope.status = 'Unable to load emp data:' + error.message;
        )
    ;

    $scope.dropboxitemselected = function (item) 
        $scope.selectedItem = item.Id;
        $scope.name = item.Name;
        $scope.age = item.Age;
        $scope.sal = item.Salary;
        $scope.empid = item.Id;
        $scope.isDeleteItemVisible = true;
    ;
    $scope.DeleteEmp = function () 
        var empToDelete = 
            'Id': $scope.empid
        ;
        EmpApi.DeleteEmployee(empToDelete)
                .then(function (response) 
                    alert("user deleted");
                    $scope.name = undefined;
                    $scope.age = undefined;
                    $scope.sal = undefined;
                    $scope.empid = undefined;
                    $scope.selectedItem = "Select Employee";
                    $scope.isDeleteItemVisible = false;
                    getEmployees();
                )
            .catch(function (response) 
                alert("error in deleting");
            );

        //Init
        getEmployees();