AngularJS学习之旅—AngularJS 指令(三)

发布时间：2020-12-17 10:38:45 所属栏目：安全来源：网络整理
导读：元素是 AngularJS 应用程序的"所有者"。 template : " 自定义指令! }); div class="cnblogs_code" span style="color: #0000ff" span style="color: #800000"head span style="color: #0000ff" span style="color: #0000ff" span style="color: #800000"met
元素是 AngularJS 应用程序的"所有者"。
template : "自定义指令! });


<span style="color: #0000ff"><<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">charset<span style="color: #0000ff">="utf-8"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="js/angular.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">ng-app<span style="color: #0000ff">="myApp"<span style="color: #ff0000"> ng-controller<span style="color: #0000ff">="myCtrl"<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">h2<span style="color: #0000ff">>价格计算器<span style="color: #0000ff"></<span style="color: #800000">h2<span style="color: #0000ff">><span style="color: #000000">

数量：

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="number"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="quantity"<span style="color: #0000ff">><span style="color: #000000"> 价格：

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="number"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="price"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">b<span style="color: #0000ff">>总价：<span style="color: #0000ff"></<span style="color: #800000">b<span style="color: #0000ff">><span style="color: #000000"> {{ quantity * price }}

<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; 重复 HTML 元素 ng-repeat 指令会重复一个 HTML 元素</span><span style="color: #008000"&gt;--></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>使用 ng-repeat 来循环数组<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li </span><span style="color: #ff0000"&gt;ng-repeat</span><span style="color: #0000ff"&gt;="x in names"</span><span style="color: #0000ff"&gt;></span><span style="color: #000000"&gt;
            {{ x }}
        </span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>

    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; 重复 HTML 元素 ng-repeat 指令用在一个对象数组 </span><span style="color: #008000"&gt;--></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>循环对象：<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li </span><span style="color: #ff0000"&gt;ng-repeat</span><span style="color: #0000ff"&gt;="x in datas"</span><span style="color: #0000ff"&gt;></span><span style="color: #000000"&gt;
            {{ x.name + ',' + x.country }}
        </span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>

    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; 创建自定义的指令 </span><span style="color: #008000"&gt;--></span>
    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; 元素名 </span><span style="color: #008000"&gt;--></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;runoob-directive</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;runoob-directive</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; 属性 </span><span style="color: #008000"&gt;--></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;runoob-directive</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; 类名 </span><span style="color: #008000"&gt;--></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="runoob-directive"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; 注释 </span><span style="color: #008000"&gt;--></span>
    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; directive: runoob-directive </span><span style="color: #008000"&gt;--></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> app <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> angular.module(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">myApp<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,[]);

app.controller(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">myCtrl<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> ($scope) {

$scope.firstName <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">John<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;

$scope.lastName <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">Doe<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 数据绑定

<span style="background-color: #f5f5f5; color: #000000">        $scope.quantity <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">10<span style="background-color: #f5f5f5; color: #000000">;

$scope.price <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">100<span style="background-color: #f5f5f5; color: #000000">;

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 重复 HTML 元素 ng-repeat 指令会重复一个 HTML 元素

<span style="background-color: #f5f5f5; color: #000000">        $scope.names <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> [<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Jani<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Hege<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Kai<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">];

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">重复 HTML 元素 ng-repeat 指令用在一个对象数组

<span style="background-color: #f5f5f5; color: #000000">        $scope.datas <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> [{

name: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Jani<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,country: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Norway<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

},{

name: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Hege<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,country: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Sweden<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

},{

name: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Kai<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,country: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Denmark<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

}

];

});

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">创建自定义的指令

<span style="background-color: #f5f5f5; color: #000000">    app.directive(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">runoobDirective<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {

<span style="background-color: #f5f5f5; color: #0000ff">return<span style="background-color: #f5f5f5; color: #000000"> {

template: <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">
自定义指令!<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">

};

});

<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!