vinod vinod - 5 months ago 10
HTML Question

How to set the value property in AngularJS

Html Code

<select class="form-control" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="">Please Select</option>
</select>
<button type="button" ng-click="btnSet();">Set Item</button>


Js Code

$scope.Register = {city: ''};
$scope.dtcmbCity = ['Delhi','Bombay','Chennai'];

$scope.btnSet= function () {
$scope.Register.city = "Delhi"
}


My problem is when load the form the data (delhi,bombay,chennai) displayed in the select box. and then i click the set button i want to set delhi into the selection box.

thanks please help

Answer

if you are looking for setting the value attribute in the options fields same as the text value than this can help you.

Your current code .

ng-options="item for item in dtcmbCity"

Result HTML.

<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity"  data-ng-model="Register.city" ng-options="item for item in dtcmbCity">

<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="string:Delhi">Delhi</option>
<option label="Bombay" value="string:Bombay">Bombay</option>
<option label="Chennai" value="string:Chennai">Chennai</option>
</select>

if you use the track by in ng-options , html code is

ng-options="item for item in dtcmbCity track by item"

Result HTML.

<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity track by item">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="Delhi">Delhi</option>
<option label="Bombay" value="Bombay">Bombay</option>
<option label="Chennai" value="Chennai">Chennai</option>
</select>

Setting the value on button click is working fine.