2 Вопрос: AngularJS: Привязать данные, возвращаемые из модального ряда, к строке, по которой щелкали

вопрос создан в Thu, May 2, 2019 12:00 AM

Использование AngularJS здесь.

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

Данные каждой вкладки возвращаются службой, которая просто возвращает массив данных (строку).

Против каждого возвращаемого строкового значения я показываю кнопку против него. При нажатии на кнопку открывается модальное всплывающее окно, где пользователь может выбрать некоторые данные. Когда они закрывают модальный режим, я возвращаю данные обратно в контроллер.

Нормальный поток привязки данных к вкладке, открытия модального режима и возврата данных из модального режима работает нормально.

Я не могу понять или придумать, как связать возвращенные данные с кнопкой или строкой, из которой они были нажаты

Например, как показано ниже:

Tab1

String1 - Button1

String2 - Button2

String3 - Button3

Если я открою модальное окно, нажав кнопку 1, как мне узнать, что кнопка 1 нажата, и связать обратно данные, которые были возвращены из модального режима.

Некоторые из соответствующих кодов, как показано ниже:

<div id="params" ng-if="type.selected">
  <tabset class="tabbable-line">
    <tab heading="Sets" ng-if="sets" active="tab.set">    
        <div class="form-group m-grid-col-md-8 param" style="margin-top:5px"
             ng-repeat="set in sets" >
              <label class="control-label col-md-3 param-label">{{set}}
              </label>                  
              <button ng-click="openModal()" class="btn btn-info btn-sm">
                Select
              </button> 
        </div>
    </tab>
    <tab heading="Tables" ng-if="tables" active="tab.table">       
        <div class="form-group m-grid-col-md-8 param"
             ng-repeat="table in tables">
            <label class="control-label col-md-3 param-label">{{table}}
            </label>               
            <button ng-click="openModal()" class="btn btn-info btn-sm">
                Select
            </button>
            </div>
        </tab>
    </tabset>
</div> 

Контроллер:

  $scope.onChangeType = function (selectedValue) {           
       $scope.getData(selectedValue);
  };

  $scope.getData = function (selectedValue) {
      //Commenting out the service part for now and hardcoding array
      // service.getData(selectedValue).then(function (res) {
           $scope.sets = ['Set1', 'Set2', 'Set3'];   
           $scope.tables = ['Table1', 'Table2'];
      // });
  };


  $scope.openModal = function () {
       myFactory.defineModal().then(function (response) {
            //how to bind data from response
        });
   };

Я создал plnkr для этого примера: http://plnkr.co/edit/vqtQsJP1dqGnRA6s?preview

- ред -

 <div class="form-group m-grid-col-md-8 param" ng-repeat="table in tables">
    <label class="control-label col-md-3 param-label">{{table}}
    </label>               
    <button ng-click="openModal(table)" class="btn btn-info btn-sm">
        Select
    </button>
       <span>
        {{table.utype}}
    </span> 
</div>
    
0
2 ответа                              2                         

Передайте объект table в качестве аргумента функции openModal:

<button ng-click="openModal(table)">Select</button>

Используйте его в функции openModal:

$scope.openModal = function (table) {
     myFactory.defineModal().then(function (result) {
         table.utype = result.utype;
         table.minvalue = result.minvalue;
     });
};

Обязательно закройте модал с результатом:

$scope.ok = function () {
    var result = { 
      utype: $scope.utype,
      minvalue: $scope.minvalue,
    };
    $modalInstance.close(result); 
};

Имейте в виду, что модалы считаются разрушительными и презираются пользователем.

Вообще говоря, сбои и отвлечения негативно влияют на работу человека, что часто встречается в когнитивной психологии. Многие исследования показали, что отвлечение внимания значительно увеличивает время выполнения широкого круга задач.

Для получения дополнительной информации см.

  

Хотя я не получаю никакой ошибки, но я не получаю возвращенный текст.

Обязательно предоставьте объекты ng-repeat:

  $scope.getData = function (selectedValue) {
      //Commenting out the service part for now and hardcoding array
      // service.getData(selectedValue).then(function (res) {
           ̶$̶s̶c̶o̶p̶e̶.̶t̶a̶b̶l̶e̶s̶ ̶=̶ ̶[̶'̶T̶a̶b̶l̶e̶1̶'̶,̶'̶T̶a̶b̶l̶e̶2̶'̶]̶;̶
           $scope.tables = [
             {name:'Table1',},
             {name:'Table2',},
          ];
      // });
  };

ДЕМО на PLNKR

    
1
2019-05-02 19: 43: 26Z
  1. Джордж, извините за мое невежество. Я попробовал выше и поставил ярлык как. &Lt; &этикетка GT; {{table.utype}} &л; /&этикетки GT; Но это дает мне ошибку. Невозможно установить свойство 'utype' из неопределенного. Это правильный способ связывания? Я попытался с ngmodel также
    2019-05-02 18: 41: 26Z
  2. В шаблоне есть два вызова openModal. Один внутри ng-repeat, который использует table в качестве итератора. Другой использует set в качестве итератора. Используйте set в качестве аргумента в этом.
    2019-05-02 18: 53: 15Z
  3. Джордж, это была опечатка на моем конце. Хотя я не получаю никакой ошибки, но я не получаю возвращенный текст. Смотрите мой обновленный код выше.
    2019-05-02 18: 57: 48Z
  4. Обязательно предоставьте объекты ng-repeat. См. обновление, чтобы ответить.
    2019-05-02 19: 44: 09Z

Попробуйте передать table openModal в свой шаблон

<button ng-click="openModal(table)"

Теперь вы можете использовать его как ссылку в своей функции openModal

$scope.openModal = function (table) {
  // table === the clicked table
}
    
0
2019-05-02 15: 12: 50Z
  1. Как связать данные с этой конкретной строкой?
    2019-05-02 15: 29: 10Z
источник размещен Вот