星空网 > 软件开发 > Java

【AngularJS学习笔记】01 指令、服务和过滤器

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

比如:

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

这个在之前已经说过了,下面讲一下之前没讲到的。

ng-repeat指令与ng-options指令

<!--一般ng-repeat通常用于ul与li这种列表和表格--><div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"><p>循环对象:</p><ul> <li ng-repeat="x  in names">  {{ x.name + ', ' + x.country }} </li></ul></div>

<!--一般ng-options通常用于select这种下拉框--><select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select><h1>你选择的是: {{selectedCar.brand}}</h1><h2>模型: {{selectedCar.model}}</h2><h3>颜色: {{selectedCar.color}}</h3><p>下拉列表中的选项也可以是对象的属性。</p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {  $scope.cars = {    car01 : {brand : "Ford", model : "Mustang", color : "red"},    car02 : {brand : "Fiat", model : "500", color : "white"},    car03 : {brand : "Volvo", model : "XC90", color : "black"}  }});</script>

当然用ng-repeat也可以实现下拉框。

<select ng-model="selectedSite"><option ng-repeat="x in sites" value="{{x.site}}">{{x.site}}</option></select>

ng-model 指令

利用ng-model指令不仅可以双向绑定控件到AngularJS应用程序的变量,还可以用来验证数据有效性

<form ng-app="" name="myForm">  Email:  <input type="email" name="myAddress" ng-model="text">  <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span></form>

提示信息会在 ng-show 属性返回 true 的情况下显示。

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

<form ng-app="" name="myForm" ng-init="myText = 'test@qq.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required> <p>编辑邮箱地址,查看状态的改变。</p> <h1>状态</h1> <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p> <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p> <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p></form>

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:

input.ng-invalid {  background-color: lightblue;}

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

字面意思相信已经足够理解了,这就用来根据输入框的各种状况来显现相应的样式。

自定义指令

<body ng-app="myApp"><ng-My-Directive1></ng-My-Directive1><div ng-My-Directive2></div><div class="ng-My-Directive3"></div><!-- directive: ng-My-Directive4 --><script>var app = angular.module("myApp", []);app.directive("ngMyDirective1", function() {  return {    restrict : "E",    template : "<h1>用元素来调用的的指令!</h1>"  };});app.directive("ngMyDirective2", function() {  return {    restrict : "A",    template : "<h1>用属性来调用的的指令!</h1>"  };});app.directive("ngMyDirective3", function() {  return {    restrict : "C",    template : "<h1>用类名来调用的的指令!</h1>"  };});app.directive("ngMyDirective4", function() {  return {    restrict : "M",    replace : true,//必须加这行代码,否则注释还是注释    template : "<h1>用注释来调用的的指令!</h1>"  };});</script></body>

 

控制器yu1

 




原标题:【AngularJS学习笔记】01 指令、服务和过滤器

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

9月俄罗斯旅游:https://www.vstour.cn/t/9月俄罗斯旅游.html
9月法国旅游:https://www.vstour.cn/t/9月法国旅游.html
9月份 澳洲旅游:https://www.vstour.cn/t/9月份 澳洲旅游.html
9月份 国内旅游:https://www.vstour.cn/t/9月份 国内旅游.html
9月份 旅游:https://www.vstour.cn/t/9月份 旅游.html
9月份 沙巴旅游:https://www.vstour.cn/t/9月份 沙巴旅游.html
珠海长隆横琴剧院在哪里?附禁带物品:https://www.vstour.cn/a/334173.html
珠海长隆横琴剧院坐公交怎么去:https://www.vstour.cn/a/334174.html
相关文章
我的浏览记录
最新相关资讯
跨境电商服务平台 | 深圳旅行社 | 东南亚物流