Angular.js - обновить параметры просмотра ng-options после изменения данных

У меня есть select с ng-options, он использует данные с одного из контроллеров. Данные - это двумерный массив, полученный ajax при запуске приложения с парами ключ-значение, например:

'option1' : array[ 1: "Test", 2: "Test2" ],
'option2' : array[ 12: "abc", 26: "zyc" ],
'option3' : array[ 14: "fdfd", 27: "fdf" ],
'option4' : array[ 15: "dff", 28: "dffd" ],

и посмотреть:

<select name="selectedLink" id="selectedLink" ng-model="selectedLink" ng-options="key as value for (key , value) in links[selectedType]" ng-change="changeLinkName()" placeholder="Please Select" class="annotation-element">

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

// Watch new element variables
$scope.addNewElement = function() {
    var newElement = $('#inputElementId').val();
    // (...)
    $scope.links[newElement[0]][newElement[1]] = newElement[2];
    $scope.selectedLink = newElement[1];
    // (...)
};

Проблема в том, что представление не обновляется. В опциях выбора по-прежнему есть только старые данные массива ссылок. Я пробовал использовать $ scope. $ Apply, но это не сработало.

Я могу только «перерисовать» все параметры с помощью jquery, но тогда я не могу использовать ng-model, ng-change и т. Д. Что мне делать, чтобы запускать обновление пользовательского интерфейса после изменения данных массива?


ajax angularjs refresh ng-options angularjs-ng-options
person lukasamd    schedule 09.08.2016    source источник
comment
Пожалуйста, разместите скрипку, если возможно. Я также вижу, что вы используете var newElement = $('#inputElementId').val(); - я не понимаю, почему вы не используете подход directive или «привязка» - главное преимущество Angular.   -  person daan.desmedt    schedule 09.08.2016
comment
Я использую скрытое поле из-за передачи данных. Мое приложение запускается в iframe, а поле устанавливается родительской функцией после другого взаимодействия с iframe - страница с загрузкой формы с помощью fancybox, после того, как данные сохранения проходят через главное окно в iframe приложения angular.   -  person lukasamd    schedule 10.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вот рабочий пример. Если вы вызываете функцию «добавить» из '[ng-click] `, она должна обновиться.

angular.module('app', [])
  .controller('someCtrl', function ( $scope ) {
    $scope.opts = [
      {id: '1', name: 'Option 1'},
      {id: '2', name: 'Option 2'},
      {id: '3', name: 'Option 3'}
    ];
    $scope.model = $scope.opts[0];
  
    $scope.add = function () {
      var idx = $scope.opts.length + 1;
      $scope.opts.push({ id: idx, name: 'Option ' + idx });
    };
  });

angular.element(document).ready(function () {
    angular.bootstrap(document.querySelector('#app'), ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div id="app" ng-controller="someCtrl">
  <button type="button" ng-click="add()">Add</button>
  <hr>
  <select ng-model="model" ng-options="o.name for o in opts"></select>
</div>

person Sebastian Sebald    schedule 09.08.2016
comment
Я тестирую несколько вариантов, и с новой кнопкой select nad simple array + с ng-click он работает нормально - в обоих случаях (взаимодействие с пользователем и щелчок по триггеру ()). К сожалению, на основном массиве это не работает. Я перемещаю данные из двумерного массива в переменную (после каждого обновления) и ... по-прежнему ничего. - person lukasamd; 10.08.2016
comment
Не могли бы вы создать пример кода? С вашими точными (нг-) вариантами? - person Sebastian Sebald; 10.08.2016