设置默认值选择AngularJS表单数据库

时间:2015-08-28 11:46:35

标签: angularjs

我是AngularJS的新手。我正在创建一个关于动态用户添加,编辑和删除过程的应用程序。但是当用户编辑他们的数据时我遇到了问题。

当用户编辑编辑按钮时,我希望预定义国家/地区列表和所选国家/地区定义的状态列表,但它不起作用。 这是我的代码:

<select class="form-control" 
        data-ng-model="countrySelectModel" 
        data-ng-change="countrySelectChange(countrySelectModel)" 
        data-ng-options="Country.CountryName for Country in CountryListUpdate track by Country.CountryCode">
    <option value="">Select Country</option>
</select>

和控制器

app.controller("VitermineNgAppCLUCtrl", function($scope, countryService) {
   //===== Get Country Change code/value 
   $scope.countrySelectChange = function(countrySelectModel) {
      $scope.$emit('eventName', {
         message: countrySelectModel.CountryCode
      });
   };
   GetAllCLUDetails();

   //==To Get All Records 

   function GetAllCLUDetails() {
      var Data = countryService.getCLU();
      Data.then(function(d) {
         $scope.CountryListUpdate = d.data;
      }, function() {
         alert('Error');
      });
   };
});

2 个答案:

答案 0 :(得分:0)

我不止一次地使用这个小提琴来举一个例子。它也可能对你有用。

JSFiddle

HTML示例:

<div ng-app="myApp" ng-controller="myAppCtrl">
    <select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames">
        <option value="">Select location</option>
    </select>
    <select class="secondDropDown" ng-model="incident" ng-options="incident.id as incident.value for incident in incidentTypesList[location]">
        <option value="">Select incident</option>
    </select>
</div>

答案 1 :(得分:0)

可能您选择的值是错误的。提供注释中提到的控制器代码。以下是带有示例控制器的html代码示例。

&#13;
&#13;
function MyCtrl($scope) {
    $scope.CountryListUpdate = [
        {CountryCode: 'DE', CountryName: 'Germany'},
        {CountryCode: 'CY', CountryName: 'Cyprus'},
      ];
    $scope.countrySelectChange = function(countrySelectModel){
      //your code
    };

    var selectedCode = 'CY';//initialize it properly.

    for(var i=0;i<$scope.CountryListUpdate.length;i++){
        if($scope.CountryListUpdate[i].CountryCode === selectedCode){
           $scope.countrySelectModel = $scope.CountryListUpdate[i];
           break;
        }
    }
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <select ng-controller="MyCtrl" class="form-control" 
    data-ng-model="countrySelectModel" 
    data-ng-change="countrySelectChange(countrySelectModel)" 
    data-ng-options="Country.CountryName for Country in CountryListUpdate track by Country.CountryCode">
     <option value="">Select Country</option>
  </select>
</body>
&#13;
&#13;
&#13;