kwell kwell - 16 days ago 4
Javascript Question

get the value in element value and use it in ng-if

I have my 2 dropdown here. My problem is, I just want to get the element value in province dropdown and pass the variable in ng-if at the city dropdown. for example the value of the selected province is 3 then the ng-if is value === province.city.province_id. please help. thanks.



$http.get(API_URL + "/register").then(function(response) {
$scope.countries = response.data['countries'];
$scope.provinces = response.data['provinces'];

//alert(response.data['provinces'].toSource());
/*$('select[id=selProvince]').change(function() {
var tempProv = $(this).val();

});*/



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group form-group-default">
<label class="">Province</label>
<select id="selProvince" class="full-width" data-placeholder="Select Province" data-init-plugin="select2" tabindex="-1" title="">

<option ng-repeat="province in provinces" value="{{province.id}}">{{province.name}}</option>

</select>
</div>

<div class="form-group form-group-default">
<label class="">City</label>
<select id="selCity" class="full-width" data-placeholder="Select City" data-init-plugin="select2" tabindex="-1" title="">

<option ng-repeat="province in provinces" ng-if="value === province.city.province_id" value="{{province.city.id}}">{{province.city.name}}</option>

</select>
</div>




Answer

Use ng-model

<div class="form-group form-group-default">
     <label class="">Province</label>
     <select id="selProvince" class="full-width" ng-model="selProvince" data-placeholder="Select Province" data-init-plugin="select2" tabindex="-1" title="">
        <option ng-repeat="province in provinces" value="{{province.id}}">{{province.name}}</option>
     </select>
</div>

<div class="form-group form-group-default">
     <label class="">City</label>
     <select id="selCity" class="full-width" data-placeholder="Select City" data-init-plugin="select2" tabindex="-1" title="">
         <option ng-repeat="province in provinces" ng-if="selProvince === province.city.province_id" value="{{province.city.id}}">{{province.city.name}}</option>

     </select>
</div>
Comments