AngularJS - 使用ngRepeat的下拉菜單

Question

我一直在研究一個項目，並試圖使用AngularJs創建一個下拉菜單。但我無法獲得菜單上的employeId信息來選擇。如果需要更多的代碼細節，我可以添加。

下面是它的定義之前，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"); 
      }); 
    } 
}); 

Answer 1

第一個錯誤，您正在調用getEmployees()。 定義函數後添加行。我建議您將其添加爲控制器定義中的最後一行，以使其更清晰。

第二個錯誤發生在EmpApi.getEmployees()承諾中，您正在設置$scope.emps = emps;其中emps未定義。 設置$scope.emps = response或$scope.emps = response.data取決於你implmenetation

控制器：

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(); 
    }