AngularJS: Есть ли способ создать двустороннюю привязку элемента ярлыка, чтобы я мог динамически присоединить его к объекту?

Question

Эта проблема меня расстраивала последние пару дней, так что я здесь. Я постараюсь быть максимально ясным.

У меня есть объект для извлечения из базы данных. Этот объект используется для создания выпадающих меню. Он имеет два свойства: свойство section, содержащее одну строку. Другое свойство называется значением, которое содержит все возможные параметры, которые пользователь может выбрать в раскрывающемся списке. Я использую два вложенных ng-повтора в моем HTML, чтобы создать выпадающие списки.

Я пытаюсь отправить в базу данных объект formData, который имеет в нем 2 свойства: имя выпадающего меню и значение, которое выбрал пользователь. Добавление значения, выбранного из раскрывающегося меню, легко благодаря двусторонней привязке данных, которую я установил на элементе select. Однако я не могу понять, как захватить значение из элемента метки внутри моего контроллера, чтобы я мог прикрепить его к моему объекту formData. Насколько мне известно, ng-model не работает над элементом метки. Вот HTML, который, мы надеемся сделать его немного более ясно:

<form class="form-horizontal" ng-controller="PreferenceCtrl"> 
    <div ng-repeat="(name, section) in configs"> 
     <label ng-bind="name"></label> 
     <select class="form-control" ng-model="formData.settings[$index].value"> 
      <option value="" disabled="disabled">---Please Select Option---</option> 
      <option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value"> 
      </option> 
     </select> 
    </div> 
    <div class="col-md-12" ng-include="gametemp"></div> 
    <div class="row"> 
     <div class="hr-line-dashed"></div> 
     <div class="text-center col-md-12 padding-15"> 
      <button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate> 
       <i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i>&nbsp;Save 
      </button> 
     </div> 
    </div> 
</form> 

Поскольку <select> класс может иметь ng-model прилагается к нему, я могу легко захватить это значение в моем контроллере. Я не могу сделать то же самое с этикеткой. Если кто-нибудь сможет мне помочь, я навсегда буду твоим лучшим другом. Спасибо!

Answer 1

В ответ на заголовок вопроса «Есть ли способ создать двустороннюю привязку к элементу метки», нет, это невозможно.

Но если я правильно понимаю, что вы пытаетесь сделать, похоже, что вы хотите сохранить данные в базе данных на основе информации, содержащейся как в файле <label>, так и в связанном <select>. Если это правда, то я рекомендую использовать ng-change функции в <select> так:

<select class="form-control" ng-model="formData.settings[$index].value" ng-click="dropdownItemClicked(name, formData.settings[$index].value)"> 
    <option value="" disabled="disabled">---Please Select Option---</option> 
    <option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value"> 
    </option> 
</select> 

В контроллере, создать функцию для обработки этого ng-click события:

$scope.dropdownItemClicked = function(name, value) { 
    console.log(name, value); 
    // save name/value to database 
} 

Ключа должен передать точные данные, которые вы хотите сохранить в базу данных, в свою функцию dropdownItemClicked().

Answer 2

Не могли бы вы просто поместить значение внутри метки?

<label ng-bind="name">{{formData.settings[$index].value}}</label> 

Answer 3

Невозможно прочитать этикетку. Это один способ привязки в конце концов, справа. Я бы сделал что-то подобное.

var app = angular.module('MyApp', []); 
 

 
app.controller("MyCtrl", function($scope){ 
 
    $scope.formData = { 
 
     settings:[] 
 
    }; 
 

 
    $scope.configs = { 
 
     'Label1': [{ value: 11 }, { value: 12 }], 
 
     'Label2': [{ value: 21 }, { value: 22 }] 
 
    }; 
 
    
 
    $scope.change = function(name, idx) { 
 
     $scope.formData.settings[idx].name = name; 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 

 
<div ng-cloak="" ng-app="MyApp"> 
 
<form class="form-horizontal" ng-controller="MyCtrl"> 
 
    <div ng-repeat="(name, section) in configs"> 
 
     <label ng-bind="name"></label> 
 
     <select class="form-control" ng-model="formData.settings[$index].value" ng-change="change(name, $index)"> 
 
      <option value="" disabled="disabled">---Please Select Option---</option> 
 
      <option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value"> 
 
      {{item.name}} 
 
      </option> 
 
     </select> 
 
    </div> 
 
    <div class="col-md-12" ng-include="gametemp"></div> 
 
    <div class="row"> 
 
     <div class="hr-line-dashed"></div> 
 
     <div class="text-center col-md-12 padding-15"> 
 
      <button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate> 
 
       <i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i>&nbsp;Save 
 
      </button> 
 
     </div> 
 
    </div> 
 
    <div> 
 
    {{formData.settings}} 
 
    </div> 
 
</form> 
 
</div>