angularjs directive实现控件过滤器功能

最新推荐文章于 2021-03-24 08:58:38 发布

原创最新推荐文章于 2021-03-24 08:58:38 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #directive #过滤器

angularjs 专栏收录该内容

29 篇文章

订阅专栏

本文展示了如何使用 AngularJS 的 ng-model 和自定义指令进行数据格式化。第一部分给出了 HTML 代码中使用 ng-model 和 ng-options 的示例。第二部分展示了一个名为 'toString' 的自定义指令，该指令用于将模型值转换为字符串。第三部分是一个多参数示例，创建了一个 'limitNum' 指令，用于限制输入数值不超过指定的最大值。整个例子在实际应用中演示了 AngularJS 如何优雅地处理数据绑定和用户输入的限制。

1）html代码

<select ng-model="ColumnModel.Category" 
ng-options="s.Code as s.Name for s in CategoryList" 
ng-change="categoryChange()" to-string>
</select>

2）angularjs代码

app.directive("toString", function () {
            return {
                restrict: "A",
                require: "ngModel",
                link: function (scope, elem, attr, ngModelCtr) {
                    ngModelCtr.$formatters.push(function (viewValue) {
                        if (typeof viewValue == "undefined") {
                            return '';
                        } else {
                            return viewValue.toString()
                        }
                    })
                }
            }
        });

3）多参数

<html ng-app="my_app">
	<head>
		<meta name="viewport" content="width=device-width" />
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				$scope.nums = [{
					id: 1,
					num: 50,
					max: 100
				}, {
					id: 1,
					num: 100,
					max: 100
				}, {
					id: 1,
					num: 200,
					max: 100
				}];
			});

			app.directive("limitNum", function() {
				return {
					restrict: "A",
					require: "ngModel",
					scope: {
						max: '='
					},
					link: function(scope, elem, attr, ngModelCtr) {
						ngModelCtr.$formatters.push(function(input) {
							if(input > scope.max) {
								return scope.max;
							} else {
								return input;
							}
						})
					}
				}
			});
		</script>
	</head>

	<body ng-controller="my_controller">
		<div>
			<ul>
				<li ng-repeat="item in nums">
					<input type="number" ng-model="item.num" limit-num max="item.max" />
				</li>
			</ul>
		</div>
	</body>

</html>