AngularJS 基础

最新推荐文章于 2020-09-11 11:28:46 发布

ting119

最新推荐文章于 2020-09-11 11:28:46 发布

阅读量128

点赞数

分类专栏： angular 文章标签： AngularJS HTML JS

本文链接：https://blog.csdn.net/ting119/article/details/79908961

版权

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. AngularJS 常用表达式

读取方式：{{}}

读取内容：数字、字符串、数组、对象；

举栗子：

<body>
<div ng-app ng-init="num=[6,5,4,3,2,1];string='thsi is string';obj={name:'bobo'}">
    <p>数字：{{5+3}}</p>                    //数字：8
    <p>数组：第四个元素值{{num[4]}}</p>       //数组：第四个元素值2
    <p>字符串：{{string}}</p>                //字符串：this is string
    <p>对象：{{obj.name}}</p>                //对象：bobo
</div>
</body>

备注：1.1 ng-app 一个 html 文档最好只出现一次，如果出现多次也是只有第一个起作用，并且可以出现在 html 文档的任何一个元素上。作用：告诉子元素下指令是归 angularJS ，angularJS 会识别的。

1.2 ng-init 作用：初始化。

2.AngularJS常用指令

2.1 ng-model （模型）：数据的绑定，需要和 input、select 等指令进行配合使用。

举栗子：

<body>
<script>
    angular.module("myApp", []).controller("myControl", ["$scope", function ($scope) {
        $scope.name = "111";
        $scope.name1 = "222";
        $scope.fun = function () {
            console.log("val:" + document.getElementById("val").value)
        }
    }])
</script>
<!--在input中的值，若 ng-model 与 ng-value 都存在的话，则 ng-value 中值会被覆盖，显示 ng-model 中的值-->
<div ng-app="myApp" ng-controller="myControl">
    <input type="text" id="val" ng-model="name" ng-value="name1" ng-οnclick="fun()">
    {{name}}
</div>
</body>

2.2 ng-disabled 禁用或启用输入框，ng-disabled 中的表达式返回 true 则表单字段将被禁用

举栗子：

<body ng-app="">
<input type="text" ng-disabled="false">
<input type="text" ng-disabled="true">
<select ng-disabled="true">
    <option>Female</option>
    <option>Male</option>
</select>
<select ng-disabled="false">
    <option>Female</option>
    <option>Male</option>
</select>
</body>

2.3 ng-show 根据条件显示

举栗子：

<body ng-app="">
<div ng-show="1==1">hahahahhahah</div>
<div ng-show="1==0">121212121</div>
</body>

2.4 ng-app 告诉 AngularJS 应用当前这个元素是根元素，必须有，并且只有第一个有用

举栗子：

<body>
<div ng-app="haha" ng-controller="haha">
{{name+" is "+sex}}
</div>
<script>
    var app=angular.module("haha",[]);
    app.controller("haha",function ($scope) {
        $scope.name="John";
        $scope.sex="girl";
    })
</script>
</body>

3. AngularJS 控制器

是一个 JS 函数/类，用于操作作用域中，各个状态的初始状态以及行为。

使用方法：绑定在相应的标签中，则整个作用域都属于该控制器控制范围，如 body 中加入，则整个页面都被该控制器控制，或者 div 中。

4. $scope 作用域

指向应用模型的对象，它是表达式的执行环境。指令会产生对应的作用域，如 ng-app、ng-controller、ng-repeat；

ng-app 的作用域（$rootScope），它是其它所有 $scope 的最顶层；

作用域可以继承，举栗子：

<body ng-app="app">
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function ($scope) {
                $scope.args = 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function ($scope) {

            }])
</script>
<div ng-controller="parentCtrl">
    <input type="text" ng-model="args">
    <div ng-controller="childCtrl">
        <input type="text" ng-model="args">
    </div>
</div>
</body>

ting119

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 基础

1. AngularJS 常用表达式读取方式：{{}} 读取内容：数字、字符串、数组、对象；举栗子： &lt;body&gt;&lt;div ng-app ng-init="num=[6,5,4,3,2,1];string='thsi is string';obj={name:'bobo'}"&gt; &lt;p&gt;数字：{{5+3}}&lt;/p&gt; ...
复制链接

扫一扫

专栏目录