Question

我正在一个项目上，我需要将options值绑定到对象键的方式，使得在选择一个选项时，它给出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 标记完成的，该标记给出了所选选项的值，但是我想要这样一种方式：当我单击 Apartment 选项时，则其绑定变量 PredictCtrl.detail.building_type_AP 变为1，其余保持为0。类似地，它与其他选项相同。

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

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

谢谢。

Answer 1

您应该看一下NgOptions指令，它是使用select标记的“ 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>

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

在我撰写本文时，没有一个答案实际上提出了一个可行的解决方案，所以这里是一个。

不要将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

3 个答案: