Привязать значение опций к ng-модели в angularjs - PullRequest
Новая
       41

Привязать значение опций к ng-модели в angularjs

0 голосов
/ 03 октября 2018

Я работаю над проектом, и мне нужно привязать значение опций к ключам объекта таким образом, чтобы при выборе опции он давал 1, иначе другие переменные остаются равными 0.

MyHTML-код: - 

<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 , который дает значение выбранной опции,но я хочу, чтобы при нажатии опции Квартира она связывала переменную PredictCtrl.detail.building_type_AP , равную 1, остальное оставалось 0. Аналогично, с другими параметрами.

Я хочу отправить данные в том же формате через API.

Итак, пожалуйста, помогите мне.Извините, если мне не очень понятно объяснения или опечатки.

Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 03 октября 2018

попробуйте так:

в вашем контроллере: 

$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

0 голосов
/ 03 октября 2018

Ни один из ответов на момент написания статьи на самом деле не представляет собой работающее решение, так что вот одно.

Не разбрасывайте директивы 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);
      }
    };
  });


  
  {{ PredictCtrl.detail | json }}
0 голосов
/ 03 октября 2018

Вы должны взглянуть на директиву NgOptions , которая является способом "angularjs" для работы с тегом select.

Он сможет удовлетворить ваши требования, поскольку вы получите выбранную опцию в объекте 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>
...