AngularJS - 使用 ngRepeat 的下拉菜单答案

【问题标题】：AngularJS - dropdown menu using ngRepeatAngularJS - 使用 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。

标签： javascript jquery angularjs angularjs-ng-repeat

【解决方案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();
    }

【讨论】：