Невозможно обновить содержимое UI-ВЫБ.2 от $ объема $ смотреть

Упрощенная версия моего кода выглядит следующим образом:.

var app = angular.module("App", ['ui.select2']); 
app.controller("MainController", function ($scope) { 

    $scope.select2Options1 = { 
     data: [{id: 0, text: "Foo"}, {id: 1, text: "Bar"}] 
    }; 

    $scope.select2Options2 = { 
     data: [] 
    }; 

    $scope.$watch('chosen1', function (newVal, oldVal) { 
     if (newVal !== undefined && newVal !== null) { 
      console.log("Valid value selected: " + newVal); 
      $scope.select2Options2.data.push({id: 0, text: "FooBar"}); 
     } 
    }); 
});

Разметка:

<html> 
<head> 
    <link rel="stylesheet" href="bower_components/select2/select2.css"> 
    <script type="text/javascript" src="bower_components/jquery/jquery.js"></script> 
    <script type="text/javascript" src="bower_components/select2/select2.js"></script> 
    <script type="text/javascript" src="bower_components/angular/angular.js"></script> 
    <script type="text/javascript" src="bower_components/angular-ui-select2/src/select2.js"></script> 
    <script src="app.js"></script> 
</head> 

<body ng-app="App"> 
    <input ng-controller="MainController" ng-model="chosen1" ui-select2="select2Options1" style="width:100px"> 
    <input ng-controller="MainController" ng-model="chosen2" ui-select2="select2Options2" style="width:100px"> 

</body> 
</html>

То, что я хочу сделать, это обновите содержимое ui-select2 ($scope.select2Options2.data), когда что-то выбирается из другого ui-select2 ($scope.select2Options1.data).

Проблема в том, что содержимое второго ui-select2 не обновляется независимо от того, что я делаю в обработчике $scope.$watch. Если я переместил этот $scope.select2Options2.data.push({id: 0, text: "FooBar"}); за пределы обработчика часов, он будет работать, а второй ui-select2 будет заселен. Это означает, что должно быть что-то принципиально неправильное.

Любые предложения, как исправить это?

источник

2014-02-04 juzzlin

Основная причина проблемы, по-видимому, в том, что я дважды определил MainController в HTML. Завершение всего внутри одного div с помощью ng-controller = «MainController» устраняет проблему.

источник

2014-02-05 15:51:45 juzzlin

Я считаю, что вы не используете модуль в соответствии с рекомендациями. Пожалуйста, прочитайте документацию по адресу https://github.com/angular-ui/ui-select2.

Способ включения опций в <select> в Угловом - это использовать директиву ng-options. Однако ui-select2 не полностью поддерживает эту директиву и рекомендует вместо этого использовать теги <option>. В вашем случае это должно быть что-то вроде:

<select ui-select2 ng-model="select2" data-placeholder="Pick a number"> 
    <option value=""></option> 
    <option ng-repeat="item in select2Options2" value="{{item.id}}">{{item.text}}</option> 
</select>

Пожалуйста, обратите внимание, что, в отличие от использования нг-опций, выбранный объект хранимую с помощью нг-модели, в этом случае будет строковое представление, а не реальный объект. Это ограничение при использовании ui-select2. Поэтому имейте в виду, что то, что хранится в выбранном2, будет иметь значение {{item.id}} (строка), а не объект {id: 0, text: "Foo"}.

Последнее, почему это частично сработало в вашем случае? Причина в том, что вы использовали внутренние функции select2 для генерации параметров. Это нормально работает при инициализации, но в этом поле select2options.data нет набора часов (Select2 ничего не знает об угловом). Таким образом, любые данные, имеющиеся там при инициализации, будут отображаться, но никаких обновлений не будет.

источник

2014-02-04 19:22:30 SveinT

Ну, это ничего не изменило. Я все еще не могу изменить данные. Я также заметил, что я ничего не могу изменить из $ scope. $ Watch, даже простой текст не обновляется. Обработчик выполняется, так как я вижу свои консольные журналы. – juzzlin

Я попытался установить $ scope.Hello = "Hello!" в обработчике $ scope. $ watch, но ничего не происходит (разметка

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

Невозможно обновить содержимое UI-ВЫБ.2 от $ объема $ смотреть

ответ

{{Hello}}

Смежные вопросы