用户工具

站点工具


web:angular
    • 扩展html元素,支持隐藏,支持添加代码,支持输入验证,directive扩展指令
    • ng-model绑定域,ng-bind展示变量,ng-init初始化,ng-repeat重复,ng-controller控制
    • ng-disabled禁用,ng-show显示,ng-hide隐藏
    • ng-click点击,
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<div ng-app="" ng-init="name='John'">
  <p>在输入框中尝试输入:</p>
  <p>姓名:<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
  • 变量初始化
    • 支持多个变量:ng-init=“quantity=1;cost=5”,<span ng-bind="quantity * cost"></span>
    • 支持对象:ng-init="person={firstName:'John',lastName:'Doe'}",{{ person.lastName }}
    • 支持数组:ng-init="points=[1,15,19,2,40]",{{ points[2] }},<li ng-repeat="x in names">{{ x }}</li>
  • 作用域$scope、根作用域$rootScope,控制器angular.module('myApp', []).controller('namesCtrl', function($scope) {})
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>
  • 过滤器:输入test过滤,管道|过滤支持currency filter lowercase orderBy uppercase
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
  • 下拉框:ng-repeat选择结果是字符串,ng-options选择结果是对象{site,url},并支持y.brand for (x, y) in cars遍历{car:{brand,color}}
<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
<select ng-model="selectedSite"><option ng-repeat="x in names">{{x}}</option></select>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "W3CSchool", url : "http://www.w3cschool.cn"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>
  • 服务:在controller中定义即可使用
    • $location:absUrl()当前网址
    • $http:get(url).then(function(response){response.data})
    • $timeout:(function(){$scope.key='value'}, 2000),$interval类似
    • 自定义服务:app.service('myservice',function(){ this.add=function(x,y){return x+y;} }),myservice.add(1,1)
web/angular.txt · 最后更改: 2020/10/28 17:06 由 admin