Question

我有以下代码

                <div ng-repeat="category in categories">
                <div ng-repeat="(key, value) in category">
                    {{ key + ":"}}
                    <select id={{key}} class="my_select"
                            data-ng-model="key.type"
                            data-ui-select2="{}" multiple>
                        <option ng-repeat="c in value"
                                ng-selected="(filters[key].length>0) && (filters[key].indexOf(c.trim()) !== -1)" >
                            {{c.trim()}}</option>
                    </select>

                </div>
            </div>

和控制器中的这个，它永远不会激活（当我更改选择时，控制台日志不会显示任何内容）：

    $scope.$watch('key.type', function(newValue, oldValue){
    console.log("" +newValue + " " + oldValue);
}, true);

如何在这种情况下观看选择？我找到了很多关于Angular，ng_repeat和ng_model的答案，但没有一个对我有用。任何帮助表示赞赏。

我正在尝试做什么：给定类别为[{category：[laptop，TV]}，{cpu：[Core i5，Core i7]}] 构建两个选择并检索所选数据（select2 with multiple items）

Answer 1

使用ng-repeat指令时，您创建的新范围只能在包含ng-repeat的块中访问。该块继承其父块的所有范围属性。

这意味着，在ng-repeat区块内，您可以访问key区域，但不能访问它。

因此，在$watch上放置它将无效。

在这种情况下，您需要做的是使用ng-change指令，该指令明确用于响应select标记中的更改。

将此指令放在select为：

上

<div ng-repeat="category in categories">
    <div ng-repeat="(key, value) in category">
        {{ key + ":"}}
        <select id={{key}} class="my_select"
            data-ng-model="key.type"
            data-ui-select2="{}"
            data-ng-change="changeInSelect(key, value)" multiple>
            <option ng-repeat="c in value"
                ng-selected="(filters[key].length>0) && 
                (filters[key].indexOf(c.trim()) !== -1)" >
                    {{c.trim()}}
            </option>
        </select>
    </div>
</div>

然后在你的控制器中，定义一个将处理它的函数：

$scope.changeInSelect = function (key, value) {
    //DO something here
};

Answer 2

我找到的唯一方法是编辑以角度方式实现select2的select2.js。

    $timeout(function () {
      elm.select2(opts);

      // Set initial value - I'm not sure about this but it seems to need to be there
      elm.select2('data', controller.$modelValue);
      elm.on('change', function(a){
          scope.$emit('select2:change', a);
      });

然后你可以使用followind代码在你的控制器中监听：

    $scope.$on('select2:change', function (event, element) {

    if(element.added){
        console.log(element);
        console.log(event);
        $scope.updateCategories(event.targetScope.key, element.added.text.trim());
    }
    if(element.removed){
        console.log("Removed");
        $scope.cleanUpOldStuff(event.targetScope.key, element.removed.text.trim());
    }
});

这不是最好的方式，但它有效......

在多个嵌套的ng-repeat中观察ng-model

2 个答案: