Question

我的代码的简化版本如下：

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会被填充。这意味着必须有一些根本错误的东西。

有任何建议如何解决这个问题？

Answer 1

我相信您没有按照建议使用该模块。请阅读https://github.com/angular-ui/ui-select2上的文档。

在Angular中启用<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>

请注意，与使用ng-options不同，通过ng-model存储的选定对象在这种情况下将是字符串表示，而不是实际对象。使用ui-select2时这是一个限制。所以请注意，存储在selected2中的内容将是{{item.id}}（字符串）的值，而不是{id: 0, text: "Foo"}对象。

最后，为什么它部分适用于您的情况？原因是，您使用select2内部函数来生成选项。这在初始化时就像普通一样，但是这个select2options.data字段没有设置监视器（Select2对Angular一无所知）。因此，初始化时会显示任何数据，但任何更新都不会。

Answer 2

问题的根本原因似乎是我在HTML中定义了MainController两次。使用ng-controller =“MainController”将所有内容包装在单个div中解决了问题。

无法从$ scope更新ui-select2内容。$ watch

2 个答案: