发表于： 2021-11-19 23:21:18
0 859
以ng前缀开头的都是内置指令，因此不要以ng开头命名自定义指令。此外还有其他内置指令在标签中不易发现，如<a>和<form>。
一，布尔属性
<input type="text" ng-model="someProperty" placeholder="TypetoEnable"><button ng-model="button" ng-disabled="!someProperty">AButton</button>
例二：文本字段会被禁用五秒，直到在 $timeout 中将 isDisabled 属性设置为 true
<textarea ng-disabled="isDisabled">Wait5seconds</textarea><script> var myapp =angular.module('myapp', []); myapp.run(function($rootScope, $timeout) { $rootScope.isDisabled = true; $timeout(function() { $rootScope.isDisabled = false; }, 5000); });</script>
2. ng-readonly
表示只读(只能看到,不能修改)的输入域(框)
例子，第一个输入框有文本时第二个输入框只读
Type here to make sibling readonly:<input type="text" ng-model="someProperty"><br/><input type="text"ng-readonly="someProperty"value="Some text here"/>
3. ng-checked
例，通过 ng-init 指令将 someProperty 的值设置为 true ，将 some Property
同 ng-checked 绑定在一起。
<label>someProperty = {{someProperty}}</label><input type="checkbox"ng-checked="someProperty"ng-init="someProperty = true"ng-model="someProperty">
4. ng-selected
ng-selected 可以对是否出现 option 标签的 selected 属性进行绑定
<label>Select Two Fish:</label><input type="checkbox"ng-model="isTwoFish"><br/><select><option>One Fish</option><option ng-selected="isTwoFish">Two Fish</option></select>
二，类布尔属性
1，ng-href
作用域中的属性动态创建URL,两秒后链接有效
<a ng-href="{{ myHref }}">I'm feeling lucky, when I load</a><script> angular.module('myApp', []) .run(function($rootScope, $timeout) { $timeout(function() { $rootScope.myHref = 'http://google.com'; }, 2000); });</script>
2. ng-src
AngularJS会告诉浏览器在 ng-src 对应的表达式生效之前不要加载图像
<h1>WrongWay</h1><img src="{{imgSrc}}"/><h1>Rightway</h1><img ng-src="{{imgSrc}}"/><script> var myapp =angular.module('myapp', []); myapp.run(function($rootScope, $timeout) { $timeout(function() { $rootScope.imgSrc = 'images/bally.jpg'; }, 2000); });</script>
angular路由跳转
一.问号传参
跳转方式，页面跳转或js跳转
问号传参的url地址显示为 …/list-item?id=1
<!-- 页面跳转 -->
<a [routerLink]="['/list-item']" [queryParams]="{id:item.id}">
<span>{{ item.name }}</span>
</a>
//js跳转
//router为ActivatedRoute的实例
this.router.navigate(['/list-item'], {
queryParams: {
id: this.itemId
},
skipLocationChange: true //可以不写，默认为false，设为true时路由跳转浏览器中的url会保持不变，传入的参数依然有效
});
获取参数方式
this.route.queryParams.subscribe(
params => {
this.id= params['id'];
}
);
二. 路径传参
路径传参的url地址显示为 …/list-item/1
<!-- 页面跳转 -->
<a [routerLink]="['/list-item', item.id]">
<span>{{ item.name }}</span>
</a>
//js跳转
//router为ActivatedRoute的实例
this.router.navigate(['/list-item', item.id]);
路径配置：
{path: 'list-item/:id', component: ListItemComponent}
获取参数方式
this.route.params.subscribe(
param => {
this.id= param['id'];
}
)
返回列表
评论