angular.copy不适用于依赖于另一个的字段(使用ng-change时)

时间:2017-05-17 05:40:07

标签: javascript angularjs

我是AngularJS的新手。在我的场景中我遇到了angular.copy的问题。我有一个表格,包括姓名,手机,州,地区,城市等某些字段。当用户选择州时,将相应地检索地区。与城市相同。在这里,我正在对州和地区的字段使用ng-change。在添加数据时,它工作正常。编辑特定记录时,我正在使用angular.copy。然后,只有像名称,移动,状态一样独立的字段才能完美复制。但是地区和城市没有被复制。请帮我解决这个问题。

这是我的HTML表单。

<div ng-controller="EmpController">
 <form name="empForm" id="empForm" ng-submit="addEmp(emps)">
   Employee ID: <input type="text" class="form-control" id="empid" name="empid" ng-model="emps.empid"  required /><br>

   Role: <select class="form-control" id="role" name="role" ng-model="emps.role" ng-options="roles.role as roles.role for roles in rolelist" required>
             <option value="">Select</option>
         </select><br>
   State: <select class="form-control" id="state" name="state" ng-model="data.state" ng-options="states.state as states.state for states in statelist" required ng-change="getDistricts(data.state)">
             <option value="">Select</option>
          </select><br>
   District: <select class="form-control" id="district" name="district" ng-model="data.district" ng-options="districts.district as districts.district for districts in districtlist" required ng-change="getCities(data)">
               <option value="">Select</option>
             </select><br>
   City: <select class="form-control" id="city" name="city" ng-model="data.city" ng-options="cities.city as cities.city for cities in citylist" required ng-change="getAreas(data)">
           <option value="">Select</option>
         </select><br>
   Area: <select class="form-control" id="area" name="area" ng-model="data.area" ng-options="areas.area as areas.area for areas in arealist" required>
           <option value="">Select</option>
         </select><br>
  <input type="submit" class="btn" value="Add">
 </form>
 <table class="table table-striped">
   <thead>
     <th>Employee ID</th>
     <th>Role</th>
     <th>State</th>
     <th>District</th>
     <th>City</th>
     <th>Area</th>
     <th>Action</th>
   </thead>
   <tbody>
     <tr ng-repeat="emps in emplist">
       <td>{{emps.empid}}</td>
       <td>{{emps.role}}</td>
       <td>{{emps.state}}</td>
       <td>{{emps.district}}</td>
       <td>{{emps.city}}</td>
       <td>{{emps.area}}</td>
       <td>
         <button class="btn btn-primary glyphicon glyphicon-edit" ng-click="editEmp(emps,$index);"></button>
         <button class="btn btn-danger glyphicon glyphicon-trash" ng-click="deleteEmp(emps._id,$index);" style="margin-left:10px;" ng-if="emps.empid.toLowerCase()!='admin'"></button>
       </td>
     </tr>
   </tbody>
 </table>
</div>

这是我的controller.js

app.controller("EmpController", function($scope, EmpService, RoleService, StateService, DistrictService, CityService, AreaService) {
$scope.rolelist=RoleService.getRole();
$scope.emplist=EmpService.getEmp();
$scope.statelist=StateService.getState();
$scope.getDistricts=function(state) {
    $scope.districtlist=DistrictService.getDistricts(state);
}
$scope.getCities=function(sds) {
    $scope.citylist=CityService.getCities(sds);
}
$scope.getAreas=function(list){
    $scope.arealist=AreaService.getAreas(list);
}
$scope.editEmp=function(id,index){
    $scope.emps=angular.copy(id);
    flag=index;
}
$scope.addEmp=function(emp){
    $scope.emps.pronarea=$scope.pronarealist;
    if(!$scope.emps._id){
        console.log(emp);
        EmpService.addEmp(emp);
        $scope.emps={};
    }
    else{
        EmpService.updateEmp(emp,flag);
    }
}
$scope.deleteEmp=function(id,index){
    EmpService.deleteEmp(id,index);
}
});

1 个答案:

答案 0 :(得分:1)

根据我的理解,复制对象后,您将获得状态,现在基于州,获取区域并将其分配给您的列表,如

 $scope.editEmp=function(id,index){
$scope.emps=angular.copy(id);
  $scope.districtlist=DistrictService.getDistricts(id.state);
 //some stuff here to get the cities based on the district you get if match then get the city from below code 
  $scope.citylist=CityService.getCities(id.city);
flag=index;
}

稍后将这些值分配给您的模型