コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > データベース > mysql チュートリアル > AngularJs自学笔记（2）

AngularJs自学笔记（2）

WBOY
リリース： 2016-06-07 15:33:09
オリジナル
1132 人が閲覧しました

AngularJS 指令 AngularJS 指令是以 ng 作为前缀的 HTML 属性 div ng-app = "" ng-init = "firstName='John'" p 姓名为 span ng-bind = "firstName" / span / p / div 比如上面的ng-app ng-bind ng-init都是AngularJS 指令 ng-app ng-bind 用来将 span 的inn

AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性

<code><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"firstName='John'"</span>>

<span>p</span>>姓名为 <span>span</span> <span>ng-bind</span>=<span>"firstName"</span>><span><span>span</span>></span><span><span>p</span>></span>

<span><span>div</span>></span></code>
ログイン後にコピー

比如上面的ng-app ng-bind ng-init都是AngularJS 指令

ng-app

ng-bind用来将<span></span> 的innerHTML的数值进行绑定，让span内的value值变为firstName变量中的值
这里需要注意的是用ng-bind与用表达式来进行数据绑定有一定的区别，例如：

<code><span><span>p</span> <span>ng-bind</span>=<span>"firstName"</span>></span><span><span>p</span>></span>
<span>p</span>><span>{{ <span>firstName</span> }}</span><span><span><span>p</span>></span></span></code>
ログイン後にコピー

ng-bind的方式是当AngularJS对数据渲染完毕后才会显示的，而表达式的方式就算AngularJS没有对这个变量渲染完毕也是会有可能显示的（就是说会直接在页面上显示字符串“{{ firstName }}”）

ng-init用来初始化AngularJS程序的变量（很少用）

<code><input>type=<span>"number"</span> ng-model=<span>"quantity"</span>></code>
ログイン後にコピー

ng-model 用来将input中的value的值与AngularJS中的变量进行绑定，这里是与变量quantity进行了绑定

ng-repeat
例如：

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"names=['Jani','Hege','Kai']"</span>></span>
  <span>p</span>>使用 ng-repeat 来循环数组<span><span>p</span>></span>
  <span>ul</span>>
    <span>li</span> <span>ng-repeat</span>=<span>"x in names"</span>>
      <span>{{ <span>x</span> }}</span><span>
    <span><span>li</span>></span>
  <span><span>ul</span>></span>
<span>div</span>></span></code>
ログイン後にコピー

结果如下：
AngularJs自学笔记（2）

ng-controller 用来创建一个控制器，具体使用参照下面写的控制器部分

还有许多ng指令，后续学到可以在这里补充

AngularJS 表达式

AngularJS 表达式写在双大括号内，其表达式的内容和形式与Javascript是一致的，它们可以包含文字、运算符和变量

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"quantity=1;cost=5"</span>></span>

<span>p</span>>总价： <span>{{ <span>quantity</span> * <span>cost</span> }}</span><span><span><span>p</span>></span>

<span><span>div</span>></span>

<span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"firstName='John';lastName='Doe'"</span>></span>

<span>p</span>>姓名： <span>{{ <span>firstName</span> + <span>" "</span> + <span>lastName</span> }}</span><span><span><span>p</span>></span>

<span><span>div</span>></span>
</span></code>
ログイン後にコピー

结果如下：
AngularJs自学笔记（2）

AngularJS对象

其和Javascript创建对象是一样的

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"person={firstName:'John',lastName:'Doe'}"</span>></span>

<span>p</span>>姓为 <span>{{ <span>person.lastName</span> }}</span><span><span><span>p</span>></span>

<span><span>div</span>></span></span></code>
ログイン後にコピー

上面这些东西都是一些基本的内容，基本上与JS差不多，当然现在可能不够全面，后续如果有新的内容再回来补充。

AngularJS控制器

首先，先来一段代码

<code><span><span>div</span> <span>ng-app</span>=<span>"main"</span> <span>ng-controller</span>=<span>"personController"</span>></span>

名： <span>input</span> <span>type</span>=<span>"text"</span> <span>ng-model</span>=<span>"person.firstName"</span>><span>br</span>>
姓： <span>input</span> <span>type</span>=<span>"text"</span> <span>ng-model</span>=<span>"person.lastName"</span>><span>br</span>>
<span>br</span>>
姓名： <span>{{<span>person.firstName</span> + <span>" "</span> + <span>person.lastName</span>}}</span><span>

<span><span>div</span>></span>

<span>script</span>></span><span>
<span><span>function</span> <span>personController</span><span>($scope)</span> {</span>
    $scope.person = {
        firstName: <span>"John"</span>,
        lastName: <span>"Doe"</span>
    };
}
</span><span><span>script</span>></span></code>
ログイン後にコピー

运行结果如下：

AngularJs自学笔记（2）

这里直接说说我对这个控制器的理解吧，其实他就是一个简单的类的创建，对应着JAVA来看，ng-controller="personController" 就对应着JAVA中创建了一个名字为personController的类，而下面以这个类的名字来命名的一个函数就是这个类对应的构造函数，$scope可以是看做JAVA中的this，而$scope.person = {....} 则是为这个personController添加了一个名为person的属性，这里，这个person属性是一个对象属性，其也有两个属性firstName和lastName而两个input域里面的值也对其person属性中的这两个属性进行了绑定，其实换做Java代码可以看成这样

<code><span>class</span> personController{

    Person person;

    personController(){
        <span>this</span>.person.firstName = <span>"John"</span>;
        <span>this</span>.person.lastName = <span>"Doe"</span>;
    }
}

<span>class</span> Person {

    <span>String</span> firstName;

    <span>String</span> lastName;
}</code>
ログイン後にコピー

当然，函数也是可以作为对象的属性的

<code><span>script</span>><span>
<span><span>function</span> <span>personController</span><span>($scope)</span> {</span>
    $scope.person = {
        firstName: <span>"John"</span>,
        lastName: <span>"Doe"</span>,
        fullName: <span><span>function</span><span>()</span> {</span>
            <span>var</span> x;
            x = $scope.person;
            <span>return</span> x.firstName + <span>" "</span> + x.lastName;
        }
    };
}
</span><span><span>script</span>></span></code>
ログイン後にコピー

这种就相当于

<code><span>class</span> personController{

    Person person;

    personController(){
        <span>this</span>.person.firstName = <span>"John"</span>;
        <span>this</span>.person.lastName = <span>"Doe"</span>;
    }
}

<span>class</span> Person {

    <span>String</span> firstName;

    <span>String</span> lastName;

    private <span>String</span> fullName(){
        <span>this</span>.firstName + <span>" "</span> + <span>this</span>.lastName;
    }
}</code>
ログイン後にコピー

控制器也是可以有方法的

<code><span>script</span>><span>
<span><span>function</span> <span>personController</span><span>($scope)</span> {</span>
    $scope.person = {
        firstName: <span>"John"</span>,
        lastName: <span>"Doe"</span>,
     };
     $scope.fullName = <span><span>function</span><span>()</span> {</span>
         <span>var</span> x;
         x = $scope.person; 
         <span>return</span> x.firstName + <span>" "</span> + x.lastName;
     };
}
</span><span><span>script</span>></span></code>
ログイン後にコピー

这里就相当于

<code><span>class</span> personController{

    Person person;

    personController(){
        <span>this</span>.person.firstName = <span>"John"</span>;
        <span>this</span>.person.lastName = <span>"Doe"</span>;
    }

    private <span>String</span> fullName(){
        <span>return</span> <span>this</span>.person.firstName + <span>" "</span> + <span>this</span>.person.lasName;
    }
}

<span>class</span> Person {

    <span>String</span> firstName;

    <span>String</span> lastName;

}</code>
ログイン後にコピー

所以目前简单看起来，AngularJs的控制器可以把它当做一个Java的类来看待

AngularJS过滤器

AngularJS过滤器可以用来转换数据，其可以通过一个”|”管道字符添加到表达式或者指令的后面来将数据进行转换，例如：

<code><span><span>div</span>  <span>ng-init</span>=<span>"firstName='John';lastName='Doe'"</span>></span>
<span>p</span>>姓名： <span>{{ (<span>firstName</span>  + <span>" "</span> + <span>lastName</span>) | <span>uppercase</span> }}</span><span><span><span>p</span>></span>
<span><span>div</span>></span></span></code>
ログイン後にコピー

输出结果如下：

<code>姓名： JOHN DOE</code>
ログイン後にコピー

可以看到当添加uppercase过滤器之后，输出的字符串都被大写了

还有几种简单的过滤器

lowercase 过滤器 就是将表达式的值变为小写

currency 过滤器 将数值转化为金钱

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-controller</span>=<span>"costController"</span>></span>

数量：<span>input</span> <span>type</span>=<span>"number"</span> <span>ng-model</span>=<span>"quantity"</span>>
价格：<span>input</span> <span>type</span>=<span>"number"</span> <span>ng-model</span>=<span>"price"</span>>

<span>p</span>>总价 = <span>{{ (<span>quantity</span> * <span>price</span>) | <span>currency</span> }}</span><span><span><span>p</span>></span>

<span><span>div</span>></span></span></code>
ログイン後にコピー

结果：

AngularJs自学笔记（2）

orderBy 过滤器 

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-controller</span>=<span>"namesController"</span>></span>
<span>p</span>>循环对象：<span><span>p</span>></span>
<span>ul</span>>
  <span>li</span> <span>ng-repeat</span>=<span>"x in names | orderBy:'country'"</span>>
    <span>{{ <span>x.name</span> + ', ' + <span>x.country</span> }}</span><span>
  <span><span>li</span>></span>
<span><span>ul</span>></span>
<span>div</span>></span></code>
ログイン後にコピー

结果：

<code>循环对象:
Kai, Denmark
Jani, Norway
Hege, Sweden</code>
ログイン後にコピー

这个过滤器对repeat指令中的数组进行了排序，并且是以country字段为依据进行排序，可以看到输出的结果中Country字段的值就是按由小到大排列而成的

filter 过滤器
其可以过滤出含有输入的字段的值的条目

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-controller</span>=<span>"namesController"</span>></span>

<span>p</span>>输入过滤：<span><span>p</span>></span>
<span>p</span>><span>input</span> <span>type</span>=<span>"text"</span> <span>ng-model</span>=<span>"name"</span>><span><span>p</span>></span>
<span>ul</span>>
  <span>li</span> <span>ng-repeat</span>=<span>"x in names | filter:name | orderBy:'country'"</span>>
    <span>{{ (<span>x.name</span> | <span>uppercase</span>) + ', ' + <span>x.country</span> }}</span><span>
  <span><span>li</span>></span>
<span><span>ul</span>></span>
<span><span>div</span>></span></span></code>
ログイン後にコピー

当我什么都没有输入的时候，输出结果如下

AngularJs自学笔记（2）

当我输入g之后，输出结果如下

AngularJs自学笔记（2）

可以看到，输出的结果中就只有那些含有输入字符串的项目了
从这个例子中也可以看出过滤器是可以连续使用的

関連ラベル：
angularjs 命令 はい ノート 独学
ソース：php.cn
前の記事：Swing桌面程序(第2篇) 次の記事：Oracle产品服务和技术级别的介绍
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2287
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2423
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2038
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1920
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1994
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート