AngularJS - 使用ngRepeat的下拉菜单

时间:2017-04-24 12:56:04

标签: javascript jquery angularjs angularjs-ng-repeat

我一直在研究一个项目并试图使用AngularJs创建一个下拉菜单。但我无法在菜单上获取employeesId信息以供选择。如果需要更多代码细节,我可以添加。

以下是image of dropdownmenu

Delete.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");
            });
    }
});

1 个答案:

答案 0 :(得分:0)

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

第二个错误发生在您设置EmpApi.getEmployees()的{​​{1}}承诺中,其中未定义emps。 根据您的implmenetation设置$scope.emps = emps;$scope.emps = response

控制器:

$scope.emps = response.data