代码之家  ›  专栏  ›  技术社区  ›  SK-USA

无法从ng下拉菜单multiselect指令调用控制器函数

  •  0
  • SK-USA  · 技术社区  · 7 年前

    我需要在我的控制器中绑定一个事件,以便在下拉列表的值发生变化时调用。此下拉列表是多选下拉列表-位于指令中。

    我已经能够使用可用的设置自定义下拉列表-但是,无法绑定事件。

    这是代码 HTML:

        <html>
        <head>
            <meta charset="utf-8">
            <title>AngularJS Dropdown Multiselect</title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width">
    
            <script src="./angular.min.js"></script>
            <!--<script src="./ui-bootstrap-tpls.js"></script>-->
          <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
          <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
            <script src="./app.js"></script>
            <style>
                .noscroll {
                    overflow: hidden;
                }
            </style>
    
        </head>
        <body>
    <div ng-app="myApp" ng-controller="AppCtrl">
        <div ng-dropdown-multiselect="" options="fruitdata"
             selected-model="fruitmodel" checkboxes="true"
             extra-settings="fruitsettings" events="extraEvents">
        </div>
        Selected Model: {{fruitmodel}} | json
    
    </div>
        </body>
    </html>
    

    JS公司:

        'use strict';
    
    var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
    
    app.controller('AppCtrl', function ($scope) {
        $scope.fruitmodel = [];
        $scope.fruitsettings = {
            enableSearch: false
        };
        $scope.fruitdata = [{
            "label": "Apple",
                "id": 1
        }, {
            "label": "Banana",
                "id": 2
        }, {
            "label": "Orange",
                "id": 3
        }, {
            "label": "Pineapple",
                "id": 4
        }, {
            "label": "Strawberry",
                "id": 5
        }];
        $scope.example2settings = {
            displayProp: 'id'
        };
    
        $scope.extraEvents = {
            onItemDeselect: '$scope.onChange'
        };
    
        $scope.onChange = function() {
            console.log($scope.fruitdata);
        };
    });
    

    我需要检测到模型的变化,并基于此采取行动。我尝试了两种方法-将ng更改添加到下拉列表中,如下所示-但是,这不起作用。

    <div ng-dropdown-multiselect="" options="fruitdata"
         selected-model="fruitmodel" checkboxes="true"
         extra-settings="fruitsettings" ng-change="onChange()">
    </div>
    

    该指令似乎允许扩展事件处理-然而,我想我没有正确理解它。

    2 回复  |  直到 7 年前
        1
  •  0
  •   Fabio Ruggiero    7 年前

    快照自 AngularJS下拉多选

    enter image description here

    似乎您必须使用:

    <div ng-dropdown-multiselect="" ... events="eventsCallback"></div>
    

    并输入控制器:

    $scope.eventsCallback = {
        onItemSelect:       function () { ... },
        onSelectionChanged: function () { ... }
    }
    
        2
  •  0
  •   Dillon    7 年前

    是$范围。您将所选项目存储在何处的水果模型?您可以使用$scope$监视集合以对更改进行操作。

    $scope.$watchCollection('fruitmodel', function(newValue, oldValue) {
        console.log(newValue, oldValue);
    });