Javascript 将选项值绑定到angularjs中的ng模型

我正在处理一个项目，我需要将选项值绑定到对象键，这样，在选择一个选项时，它给出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>

通常，绑定是使用select标记完成的，它给出所选选项的值，但我希望这样，当我单击公寓选项时，它的绑定变量PREDICTRL.detail.building_type_AP变为1，其余保持为0。同样，它也适用于其他选项

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

所以，请帮帮我。 对不起，如果我解释得不太清楚或有任何打字错误

---

提前谢谢。

您应该看看指令，这是angularjs使用select标记的方式

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

这里有一个例子

angular.moduleapp，[].controllermyCtrl，函数$scope{ $scope.details= [ {名称：公寓，价值：1}， {名称：独立住宅/别墅，价值：2}， {名称：独立楼层/建筑商楼层，值：3}， {名称：门控社区别墅，价值：4} ]; }; SelectedOption:{{SelectedOption}

试着这样做：

在控制器中：

在html模板中：

---

最后，只需遍历$scope.details并将false解析为0，将true解析为1，或者在setActive函数中执行此操作

在我撰写本文时，没有一个答案实际提供了有效的解决方案，因此这里有一个

不要将ng模型指令分散在不同的选项元素上，这是不必要的

通过使用ng选项枚举所有选项，使用单个ng模型跟踪所选选项，以及使用ng更改应用所述值（即所选键上的值为1，其他所有值为0），您可以实现所需

我假设你有一个保持细节结构不变的要求。如果可以更改，那么我建议将每个标签与各自的建筑类型关联起来，以将它们保持在一起

见下文

有棱角的 .模块'app'，[] .controller'PredictCtrl'，函数{ this.selectedDetail=null； 此。详细信息={ 建筑类型：0， 建筑类型：0， 建筑类型如果：0， 建筑类型：0， }; 此文件名为。标签={ 建筑类型“公寓”， 建筑类型：“独立住宅/别墅”， 建筑类型如果为“独立楼层/建筑楼层”， 建筑物类型：“封闭式社区别墅”， }; this.changeDetail=函数{ 对于此.detail中的var键{ this.detail[key]=+this.selectedDetail==key； } }; };

---

谢谢。我花了2个多小时和40多行代码来完成这项工作。但是这个解决方案真的很棒。再次感谢。

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

$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;
}

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