Question

当我从下拉列表中选择它时，我想在上面的框中添加一个芯片，所以我为它创建了一个过滤器，我已经将一个数组传递给它了bt现在这个函数将芯片添加到上面的盒子中现在不行，我不知道为什么。

控制器代码：

var app = angular.module("myApp", []);
app.controller("appController", function ($scope) {
    $scope.selected = [{
        'id': 1,
        'state': 'UP'
    }, {
        'id': 2,
        'state': 'Delhi'
    }];
    $scope.options = [{
        'id': 1,
        'state': 'UP'
    }, {
        'id': 2,
        'state': 'Delhi'
    }, {
        'id': 3,
        'state': 'Haryana'
    }, {
        'id': 4,
        'state': 'WB'
    }]
    $scope.add = function (item) {
        console.log(item);
        let insert = true;
        item = JSON.parse(item);
        for (let i = 0; i < $scope.selected.length; i++) {
            if (angular.equals(item, $scope.selected[i])) {
                insert = false;
                break;
            }
        }
        if (insert == true) {
            $scope.selected.push(item);
            $scope.selected = angular.copy($scope.selected);
        }
    };
    $scope.remove = function (item) {
        let a = item;
        let b = $scope.selected.indexOf(a);
        $scope.selected.splice(b, 1);
    };
});
app.directive("filter", function () {
    return {
        restrict: 'E',
        scope: {
            param: '=',
            array: '=',
            fun: '&'
        },
        template: "<div ><select ng-change='fun(items)' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select>"
    };
});

观点：

<body ng-app="myApp" ng-controller="appController">
    <div>
        <div class="chip" ng-repeat="chips in selected">
          {{ chips.state }}
          <span class="closebtn" ng-click="remove(chips)">&times;</span>
        </div>
    </div>
    <filter array='options' fun='add(param)'></filter>
</body>

完整的代码可以在this fiddle。

中找到

Answer 1

我已经看过这段代码了。除了一些错误之外，我看到的唯一问题是将数据从指令范围传递回父级。我的建议是将指令重构为：

app.directive("filter", function() {
  return {
    restrict: 'E',
    scope: {
      // selection: '=',
      array: '=',
      fun: '&'
    },
    template: `<div>
  <select ng-change='fun({ selection: selection })' ng-model='selection'>
    <option value='' selected disabled hidden>Choose Here</option>
    <option ng-repeat='item in array' value={{item}}> {{item.state}}</option>
  </select>
</div>`
  };
});

正如您所看到的，您在父母中确实不需要selection，因为它属于“过滤器”＆＃39;零件。但是，您可以通过将此数据传递给fun属性（这是您在选择更改时调用的函数）来共享此数据。

然后控制器的简化版本是：

$scope.add = function(selection) {
  var item = JSON.parse(selection);
  for (let i = 0; i < $scope.selected.length; ++i) {
    if ($scope.selected[i].id === item.id) {
      return;
    }
  }
  $scope.selected.push(item);
};

$scope.remove = function(item) {
  let index = $scope.selected.indexOf(item);
  $scope.selected.splice(index, 1);
};

可以找到初始小提琴的工作版本here。

Answer 2

更改目录中的以下行

template: "<div ><select ng-change='fun(items)' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select>"

到

template: "<div ><select ng-change='fun({param: items})' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select></div>"

我正在尝试将函数传递给我创建的指令，但它在angularjs

2 个答案: