在 angularjs 中将选项值绑定到 ng-model

Question

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

要绑定的变量 -

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

一般来说，绑定是用 select 标签完成的，它给出了 selected 选项的值，但我想要这样的方式, 当我点击 Apartment 选项时，它的绑定变量 PredictCtrl.detail.building_type_AP 变为 1，其余仍然为 0。类似地，它与其他选项.

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

所以，请帮帮我。对不起，如果我解释的不是很清楚或有任何错别字。

提前致谢。

Answer 1

您应该看一下 NgOptions 指令，它是使用 select 标签的 "angularjs" 方式。

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

这是一个例子

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

这样试试：

在你的控制器中：

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

在 html 模板中：

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

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

Answer 3

None 在我撰写本文时的答案实际上提供了一个有效的解决方案，所以这里有一个。

不要将 ng-model 指令分散到不同的 option 元素中，这是不必要的。

您可以通过使用 ng-options 枚举所有选择，使用单个 ng-model 跟踪所选选项，并使用 ng-change 应用值来实现您想要的效果您描述了（即 1 在所选键上，0 用于其他所有内容）。

我假设您需要保持 detail 的结构不变。如果它可以更改，那么我建议将每个标签与其各自的每个标签相关联 building_type_ 以将它们放在一起。

见下文。

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>

在 angularjs 中将选项值绑定到 ng-model

Bind options value to ng-model in angularjs

javascript

angularjs

two-way-binding