Bind options value to ng-model in angularjs

Question

I'm working on a project, and I need to bind the options value to object key's in such a manner that, on selecting an option, it gives 1, else other variables remain 0.

My HTML Code:-

<select required class="custom-select">
 <option disabled>Select an option</option>
 <option ng-model="PredictCtrl.detail.building_type_AP">Apartment</option>
 <option ng-model="PredictCtrl.detail.building_type_GC">Independent House / Villa</option>
 <option ng-model="PredictCtrl.detail.building_type_IF">Independent Floor / Builder's Floor</option>
 <option ng-model="PredictCtrl.detail.building_type_IH">Gated Community Villa</option>
</select>

Variable to bind -

PredictCtrl.detail = {
 building_type_AP: 0,
 building_type_GC: 0,
 building_type_IF: 0,
 building_type_IH: 0
}

Generally, binding is done with select tag, which gives the value of the selected option, but I want in such a way that, when I click on Apartment option, it's bind variable PredictCtrl.detail.building_type_AP becomes 1, rest remains 0. Similarly, it does with other options.

I want to send the data as the same format through API.

So, please Help me out. Sorry If I was not very clear with explaining or for any typo.

Thank you in advance.

Answer 1

You should take a look at the NgOptions directive which is the "angularjs" way of working with the select-tag.

It sould be able to fulfill your requirement as you will get the selected option in the SelectedOption object.

Here's an example

 angular.module("app",[]).controller("myCtrl",function($scope){ $scope.details = [ {name:"Apartment", value:1}, {name:"Independent House / Villa", value:2}, {name:"Independent Floor / Builder's Floor", value:3}, {name:"Gated Community Villa", value:4} ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <select required class="custom-select" ng-options="item as item.name for item in details" ng-model="selectedOption"> </select> <p>SelectedOption: {{selectedOption}}</p> </div> 

Answer 2

try like this:

in your controller:

$scope.details = [
    {
      name: "building_type_AP",
      value: "Apartment",
      state: false
    },{
        name: "building_type_GC",
      value: "Independent House / Villa",
      state: false
    }/*add more here*/

];


$scope.setActive = function(detail){
    detail.state = !detail.state;
}

in html template:

<select required class="custom-select">
 <option disabled>Select an option</option>
 <option ng-repeat="detail in details" ng-click="setActive(detail)">{{detail.value}}</option>
</select>

in the end just go through $scope.details and parse false to 0 and true to 1 OR just do this inside setActive function

Answer 3

None of the answers at my time of writing actually present a functioning solution, so here's one.

Don't scatter ng-model directives across different option elements, it's unnecessary.

You can achieve what you want by using ng-options to enumerate all your choices, a single ng-model to keep track of the selected option, and ng-change to apply the values as you described (ie 1 on the selected key, 0 for everything else).

I've assumed you've got a requirement to keep the structure of detail as is. If it can be changed, then I'd recommend associating each labels with each it's respective building_type_ to keep things together.

See below.

 angular .module('app', []) .controller('PredictCtrl', function () { this.selectedDetail = null; this.detail = { building_type_AP: 0, building_type_GC: 0, building_type_IF: 0, building_type_IH: 0, }; this.labels = { building_type_AP: 'Apartment', building_type_GC: 'Independent House / Villa', building_type_IF: 'Independent Floor / Builder\\'s Floor', building_type_IH: 'Gated Community Villa', }; this.changeDetail = function () { for (var key in this.detail) { this.detail[key] = +(this.selectedDetail === key); } }; }); 

 <script src="https://unpkg.com/angular@1.7.4/angular.min.js"></script> <div ng-app="app" ng-controller="PredictCtrl as PredictCtrl"> <select ng-model="PredictCtrl.selectedDetail" ng-options="key as PredictCtrl.labels[key] for (key, value) in PredictCtrl.detail" ng-change="PredictCtrl.changeDetail()"></select> <pre>{{ PredictCtrl.detail | json }}</pre> </div>