javascript - 在 md-select 下使用自定义指令传递 ngModel 和 ngChange
问题描述
我正在md-select
. 我对ngModel
和的默认行为有疑问ngChange
。我似乎无法让他们俩一起工作。
目前我有这个 http://next.plnkr.co/edit/X34DUWtkyYhbwJP4?open=lib%2Fscript.js
ngModel
正在更新,但似乎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
});
我想让这两个属性像默认值md-select
一样工作。
解决方案
使用 ng-model 和自定义指令时,您可以指定ngModel
为 require,然后自动获取对其他指令的访问权限,例如ngChange
和ngRequired
. 我已经更新了你的 plunkr: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));
}
};
}]
};
}
推荐阅读
- python - 是否可以在 Python 的 igraph 中调整边缘标签的字体大小?
- excel - 如果列标题符合某些文本条件,则对列中的所有行求和
- xml - XML 文档是否有像 HTML 这样的结束标签?
- java - 具有多个触发器(ALB、SNS...)的 AWS Lambda
- javascript - 如何清理此代码以在 JavaScript 中创建一个按钮列表,这些按钮将显示特定信息,同时摆脱其他内容?
- r - 如何阻止 R 将计算的数字转换为科学记数法
- python - Scrapy-从一个链接获取多个项目
- python - Webservice 在 Airflow docker 容器中不起作用
- android - 在 GeckoView for Android 中允许跨域请求
- python-3.x - /bin/sh: 1: wget: 未找到 python