javascript - 将选项值绑定(bind)到 AngularJS 中的 ng-model

Question

我正在开发一个项目，我需要将选项值绑定(bind)到对象键，这样在选择一个选项时，它给出 1，否则其他变量保持 0。

我的 HTML 代码:-

<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>

要绑定(bind)的变量 -

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

一般来说，绑定(bind)是通过select标签完成的，它给出了所选选项的值，但我想要这样的方式，当我点击公寓选项时，它的绑定(bind)变量 PredictCtrl.detail.building_type_AP 变为 1，其余保持为 0。类似地，其他选项也是如此。

我想通过API以相同的格式发送数据。

所以，请帮帮我。 抱歉，如果我解释得不太清楚或有任何拼写错误。

提前谢谢您。

Answer 1

您应该看看 NgOptions指令是使用选择标签的“angularjs”方式。

它应该能够满足您的要求，因为您将在 SelectedOption 对象中获得选定的选项。

这是一个例子

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>