代码之家 › 专栏 › 技术社区 › Ruchan

通过md select下的自定义指令传递ngmodel和ngchange

md-select angularjs-material angularjs javascript

0

Ruchan · 技术社区 · 6 年前

我正在做一个自定义指令 md-select . 我的默认行为有问题 ngModel 和 ngChange . 我似乎不能让他们两个一起工作。

目前我有这个 http://next.plnkr.co/edit/X34DUWtkyYhbwJP4?open=lib%2Fscript.js

这个 NGM模型 正在更新,但是 NGchange 似乎不起作用。

我也尝试过 中所示的方法 http://embed.plnkr.co/HZAHSyi9L8UQdE24zYYI/ 但在设置超时值时出现问题(假定值来自API)。

app.controller("appCtrl", function($scope){
  $scope.items = [1,2,3,4,5,6];
  $scope.foo=2; // this works
  $scope.bar = function(foo)  {
    $scope.aux = foo;
  }
  setTimeout(function(){
    $scope.foo=5;
  }, 0); // this doesnt work
});

我想让这两个属性作为默认值工作 分子选择 做。

1 回复 | 直到 6 年前

1

Michael Lynch 6 年前

使用ng模型和自定义指令时,可以指定 ngModel 根据需要,然后自动访问其他指令,如 ngChange 和 ngRequired . 我已经更新了你的装备: http://next.plnkr.co/edit/VzYpZ2elmzV6XkbM?open=lib

HTML

<md-custom-select 
    ng-model="vm.SelectItems" 
    ng-change="vm.onselectchange()" 
    list="vm.ItemList">
</md-custom-selector>

JavaScript

var app = angular.module("MaterialApp", ["ngMaterial"]);
app.directive("mdCustomSelect", ["$compile", mdCustomSelect]);

function mdCustomSelect($compile) {
    return {
        restrict: "E",
        require: {
            ngModelCtrl: '^ngModel'
        },
        scope: {
            ngModel: "<",
            list: "=",
            options: "<",
        },
        replace: true,
        link: function(scope, element, attrs, controllers) {
            scope.ngModelCtrl = controllers.ngModelCtrl;

            var searchTemplate = '<md-select-header aria-label="Select Header" class="demo-select-header"><input aria-label="InputSearchBox" ng-keydown="$event.stopPropagation()" ng-model="searchTerm" type="search" placeholder="Search items" class="md-text"></md-select-header>';
            var selectAllTemplate = '<div style="padding: 0px 0px 15px 5px; background-color: #efefef;"><md-checkbox class="md-warn" title="Select All" ng-model="checkAllChecked" ng-change="toggleSelectAll()">Check/Uncheck All </md-checkbox></div>';
            var multiSelectGroupTemplate = '<md-option ng-value="item.ItemID" ng-repeat="item in ItemList | filter: searchTerm">{{item.ItemName}}</md-option>';
            var completeTemplate = "";
            completeTemplate += '<md-select multiple ng-model="ngModel" ng-change="valChanged()" data-md-container-class="selectdemoSelectHeader">';
            completeTemplate += searchTemplate; //2 begin and end
            completeTemplate += selectAllTemplate; //3 begin and end
            completeTemplate += multiSelectGroupTemplate; //4 begin and end
            completeTemplate += " </md-select>"; //1 end
            element.html(completeTemplate);
            $compile(element.contents())(scope);
        },
        controller: ["$scope", function($scope) {
            var defaultValueProperty = ($scope.options == undefined || $scope.options.Value === undefined) ? "value" : $scope.options.Value;
            var defaultTextProperty = ($scope.options == undefined || $scope.options.Text === undefined) ? "name" : $scope.options.Text;
            $scope.isMultipleSelected = angular.isUndefined($scope.multiple) ? true : $scope.multiple;
            $scope.checkAllChecked = false;

            $scope.ItemList = [];
            var rawItemList;

            $scope.$watch("list", function(newValue) {
                $scope.ItemList = newValue.map(item => {
                    return { ItemID: item[defaultValueProperty], ItemName: item[defaultTextProperty] };
                });
            }, true);

            $scope.valChanged = function(){
                $scope.ngModelCtrl.$setViewValue($scope.ngModel);
            }

            $scope.toggleSelectAll = function() {
                if ($scope.checkAllChecked == false) {
                    $scope.ngModelCtrl.$setViewValue([]);
                } else {
                    $scope.ngModelCtrl.$setViewValue($scope.ItemList.map(item => item.ItemID));
                }
            };
        }]
    };
}