Angular JS 入门学习_angularjs入门

1、内置指令

• ng-app 制定控制域，模型的意思。
• ng-model 定义模型，与HTML元素绑定——-配合使用ng-init 数据模型初始化。
• ng-bind 绑定ng-model，可用“｛｛｝｝”来代替。
• ng-click 点击事件。 ng-dblclick(双击）
• ng-hide、ng-show 赋值为true、false 显示或者隐藏页面元素。（效率比较低，不推荐）
• ng-if 用来代替ng-hide、ng-show 拥有比较高的效率。
• ng-repeat 常用来遍历显示集合与数组，

<tr ng-repeat="item in  intems"><td>{
   {
   item.id}}<td>{
   {
   item.name}}<td><tr> 
1
2
3
4
5

<select ng-model="",ng-options="item.id  as (item.name) in items"></select>
1

• ng-include 使用ng-include可以加载、编译并包含外部HTML片段到当前的应用中。模板的URL被限制 在与应用文档相同的域和协议下，可以通过白名单或包装成被信任的值来突破限制。
• ng-switch 这个指令和ng-switch-when及on=”propertyName”一起使用，可以在propertyName发生变 化时渲染不同指令到视图中

<input type="text" ng-model="person.name"/> 
<div ng-switch on="person.name"> 
        <p ng-switch default>And the winner is</p> 
        <h1 ng-switch-when="Ari">{
   { person.name }}</h1> 
</div>
1
2
3
4
5
6

2、常用过滤器：

语法：管道字符（|）+过滤器名称。

• ｜uppercase、|lowercase 大小写转换
• ｜currey 数值–货币
• ｜date: 格式，日期转换，demo：‘yyyy-MM-dd HH:mm:ss’字符串格式 代表 年-月-日 24时：分：秒
• ｜filter：
• ｜json :将JSON、JS转换成字符串
• ｜limitTo：ｐ　截取字符串　　参数为数值，正前　负后。
• ｜number：ｐ　数字转换成文本
• ｜order　排序

3、控制器

demo:

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {
   {
   firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Angular.module(“appname”,function(