Angular-1.1.1. 常用界面组件使用

最新推荐文章于 2025-08-06 16:42:26 发布

转载最新推荐文章于 2025-08-06 16:42:26 发布 · 107 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alan-alan/p/7382657.html

文章标签：

本文介绍了AngularJS中常用的界面组件及其用法，包括数据绑定、点击事件处理、表单提交、页面包含等功能，并详细解释了如何使用ng-click、ng-model、ng-repeat等指令来实现动态网页交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1.1. 常用界面组件使用

功能	代码参考
｛｛属性名｝｝	数据绑定对象，例如{{attr1}}这里会自动绑定控制层$scope.attr1。此标签可以出现在页面调用的js函数中，注意不能使用双引号和单引号了，如<a ng-click="gotoDetail({{item.planserialno}})">立即投资</a>
ng-click	标签的点击事件，<a ng-click="testService()">test</a>：点击此标签会触发控制器中的$scope.testService方法。当然ng-click还可以用于div,ul,li等标签中。
ng-submit	form表单提交事件，如<form ng-submit="submitData()">
ng-include	通常与div结合，表示页面包含，类似于jsp的include用于引用，如<div ng-include="'templates/foot.html'"></div>表示引用foothtml页面，这样做的好处是可以共享foot.html页面。
ng-model	用于绑定input,select 等表单提交界面，如<input type="text" ng-model="UserName" placeholder="用户名/手机号/邮箱" required/>，同样UserName与控制器中的$scope.UserName一一对应。
ng-repeat	循环，类似于el表达式的forEach,用于列表循环，例如<li ng-repeat="item in items"><h5>{{item.minsum}}元</h5></li>,item代表当个对象，items表示item的集合，items与$scope.items一一对应。
ng-show	绑定标签是否显示,如<ul ng-show='menuState.show'>，那么ul是否显示根据menuState.show来判断。
ng-disabled	通常用于控制按钮是否变灰。如<button ng-disabled='!form.$valid'>Submit</button>