商品を選択すると、オプションが選択できない場合があります。（角）

Question

私は奇妙なケースがあります。選択項目としてselectを選択すると、選択項目が消えます。これは両方のセレクタで起​​こっています。 これは私が選択中の項目を選択すると、これは

<div class="form-group"> 
    <label>Country</label> 
    <select class="form-control ng-valid ng-empty ng-dirty ng-valid-parse ng-touched" 
    data-ng-model="countries" data-ng-options="c.id_country as c.country for c in countries"><option selected="selected"></option></select> 
</div> 

起こる

controllers.addLocationCtrl = function($scope, countriesFactory, provincesFactory){ 

    countriesFactory.getCountries().then(function(data){ 
     $scope.countries = data; 
     console.log($scope.countries); 
    }); 
    provincesFactory.getProvinces().then(function(data){ 
     $scope.provinces = data; 
     console.log($scope.provinces); 
    }); 
} 

これは国

[{"id_country":"1","country":"Austria"}, 
{"id_country":"2","country":"Belgium"},{"id_country":"3","country":"Bulgaria"},{"id_country":"4","country":"Croatia"},{"id_country":"5","country":"Cyprus"},{"id_country":"6","country":"Czech Republic"}, 
{"id_country":"7","country":"Denmark"},{"id_country":"8","country":"Estonia"},{"id_country":"9","country":"Finland"},{"id_country":"10","country":"France"},{"id_country":"11","country":"Germany"},{"id_country":"12","country":"Greece"}] 

ためのオブジェクトであり、これが私のHTMLで

<div class="form-group"> 
    <label>Country</label> 
    <select class="form-control" data-ng-model="countries" 
      data-ng-options="c.id_country as c.country for c in countries"></select> 
</div> 
<div class="form-group"> 
    <label>Province</label> 
    <select class="form-control" data-ng-model="provinces" 
      data-ng-options="p.id_province as p.province for p in provinces"> 
    </select> 
</div> 

私のコントローラであり、

コンソールログにエラーが全く表示されません。私はdata-ng-modelを間違った方法で使用していますか？この問題の原因は何でしょうか。追加情報が必要な場合はお知らせください。

Answer 1

アイテムを選択すると、AngularJSはcountriesの内容を、選択したid_countryに置き換えます。したがって、selectタグに表示する国はありません。

は、このデモでは、あなたの問題を参照してください。

(function() { 
 
    var app = angular.module("app", []); 
 
    app.controller("addLocationCtrl", ["$scope", 
 
    function($scope) { 
 
     $scope.countries = [{ 
 
     "id_country": "1", 
 
     "country": "Austria" 
 
     }, { 
 
     "id_country": "2", 
 
     "country": "Belgium" 
 
     }, { 
 
     "id_country": "3", 
 
     "country": "Bulgaria" 
 
     }, { 
 
     "id_country": "4", 
 
     "country": "Croatia" 
 
     }, { 
 
     "id_country": "5", 
 
     "country": "Cyprus" 
 
     }, { 
 
     "id_country": "6", 
 
     "country": "Czech Republic" 
 
     }, { 
 
     "id_country": "7", 
 
     "country": "Denmark" 
 
     }, { 
 
     "id_country": "8", 
 
     "country": "Estonia" 
 
     }, { 
 
     "id_country": "9", 
 
     "country": "Finland" 
 
     }, { 
 
     "id_country": "10", 
 
     "country": "France" 
 
     }, { 
 
     "id_country": "11", 
 
     "country": "Germany" 
 
     }, { 
 
     "id_country": "12", 
 
     "country": "Greece" 
 
     }]; 
 
    } 
 
    ]); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div data-ng-app="app"> 
 
    <div data-ng-controller="addLocationCtrl"> 
 
    <div class="form-group"> 
 
     <label>Country</label> 
 
     <select class="form-control" data-ng-model="countries" data-ng-options="c.id_country as c.country for c in countries"></select>{{countries}} 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>Province</label> 
 
     <select class="form-control" data-ng-model="provinces" data-ng-options="p.id_province as p.province for p in provinces"> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>

ソリューション：他の名前でデータ-NG-モデル= "国" を交換してください。

data-ng-model="currentCountryId"およびdata-ng-model="currentProvinceId"。当然の

(function() { 
 
    var app = angular.module("app", []); 
 
    app.controller("addLocationCtrl", ["$scope", 
 
    function($scope) { 
 
     $scope.countries = [{ 
 
     "id_country": "1", 
 
     "country": "Austria" 
 
     }, { 
 
     "id_country": "2", 
 
     "country": "Belgium" 
 
     }, { 
 
     "id_country": "3", 
 
     "country": "Bulgaria" 
 
     }, { 
 
     "id_country": "4", 
 
     "country": "Croatia" 
 
     }, { 
 
     "id_country": "5", 
 
     "country": "Cyprus" 
 
     }, { 
 
     "id_country": "6", 
 
     "country": "Czech Republic" 
 
     }, { 
 
     "id_country": "7", 
 
     "country": "Denmark" 
 
     }, { 
 
     "id_country": "8", 
 
     "country": "Estonia" 
 
     }, { 
 
     "id_country": "9", 
 
     "country": "Finland" 
 
     }, { 
 
     "id_country": "10", 
 
     "country": "France" 
 
     }, { 
 
     "id_country": "11", 
 
     "country": "Germany" 
 
     }, { 
 
     "id_country": "12", 
 
     "country": "Greece" 
 
     }]; 
 
    } 
 
    ]); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div data-ng-app="app"> 
 
    <div data-ng-controller="addLocationCtrl"> 
 
    <div class="form-group"> 
 
     <label>Country</label> 
 
     <select class="form-control" data-ng-model="currentCountryId" data-ng-options="c.id_country as c.country for c in countries"></select>{{countries}} 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>Province</label> 
 
     <select class="form-control" data-ng-model="currentProvinceId" data-ng-options="p.id_province as p.province for p in provinces"> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>