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.

score 1 · Answer 1 · answered Oct 03 '18 at 13:37

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>

score 0 · Answer 2 · answered Oct 03 '18 at 13:45

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

score 0 · Accepted Answer · answered Oct 03 '18 at 13:54

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 (i.e. 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>

Thanks a lot. It took me more than 2 hours and more than 40 lines of code to do this. But this solution is really great. Thanks again. — Rishav Pandey, Oct 03 '18 at 19:04

Bind options value to ng-model in angularjs

3 Answers3