angularjs初识

周三的时刻随着先生简朴的入门了angularjs,然后去藏书楼找了一本《Angularjs实战》来看了看,虽然这本书网上的评价不太高,但关于初学者的我来讲照样不错的,有较详实的示例代码和比较清楚的代码解说。总的来讲,收成很大。
这里这里就以一些经常运用的html标签谈谈angularjs中的基础知识。

全局对象window

在angularjs中的全局对象window被$window所替换,也就是说在angularjs中若想运用window的要领如alert等,就需要:

$window.alert('....')如许挪用

还记得刚最先打仗js时,最喜欢用alert调试代码,由于他很能干,不过这是最差的体式格局,console,和debugger越发优胜。

ng-repeat

这是一个相称主要轻易和主要的标签,和thinkphp的volist一样,不过比其照样要壮大一些,它比volist多了一些属性

$first 该纪录是不是是首条
$last  是不是是末了一条
$middle 纪录是不是是中心条
这些都是是则返回true,不然返回false。

然后另有一个$index 示意纪录的索引号,从0最先。

ng-repeat,ng-class以及angularjs的数据双向绑定合营运用可以轻松完成一些看着比较高等的操纵

《angularjs初识》

点击选中结果和隔行色彩变化
代码以下:

<html ng-app="a2_11">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增加元素款式</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        body {
            font-size: 12px;
        }
        ul {
            list-style-type: none;
            width: 408px;
            margin: 0px;
            padding: 0px;
        }
        ul li {
            float: left;
            padding: 5px 0px;
        }
        ul .odd {
            color: #0026ff;
        }
        ul .even {
            color: #ff0000;
        }
        ul .bold {
            font-weight: bold;
        }
        ul li span {
            width: 50px;
            float: left;
            padding: 0px 10px;
        }
        ul .focus {
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div ng-controller="c2_11">
    <ul>
        <li ng-class="{{bold}}">
            <span>序号</span>
            <span>姓名</span>
            <span>性别</span>
            <span>是不是首条</span>
            <span>是不是尾条</span>
        </li>
        <!-- ng-mouseover可替换ng-click -->
        <li ng-repeat=" stu in data "
            ng-class-odd="'odd'"
            ng-class-even="'even'"
            ng-click="li_click($index)"
            ng-class="{focus: $index==focus}"
        >
            <span>{{$index+1}}</span>
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>
            <span>{{$first?'是':'否'}}</span>
            <span>{{$last?'是':'否'}}</span>
        </li>
    </ul>
</div>
<script>
    angular.module("a2_11", [])
        .controller("c2_11", ['$scope', function($scope) {
            $scope.bold = 'bold';
            $scope.li_click = function(i){
                $scope.focus = i;
            };
            $scope.data = [
                {name: '张明显', sex: '女'},
                {name: '李清思', sex: '女'},
                {name: '刘小华', sex: '男'},
                {name: '陈忠忠', sex: '男'}
            ];
        }])
</script>
</body>
</html>

模表单控件

form

起首就是form表单,angularjs授与了form表单5个属性

$pristine   示意表单或控件是不是未输入过
$dirty      示意是不是已输入过
$valid      示意是不是已考证经由过程
$invalid    示意是不是未考证经由过程
$error      考证时的毛病提醒信息

假如可以好好应用这些信息,可以完成许多纯html较难完成的操纵,假如感兴趣,就本身打印出来看看有些啥,在此不多议论

单选框和复选框

在复选框中可以给予其ng-true-value,ng-false-value属性,让其在选中和未选中时可以触发差别结果,其他方面没啥穷究的。

select

select在angularjs中变得越发壮大了,这也是本篇博客的重点,select绑定数据的情势主要有三种:

(1)绑定简朴的数组数据,就和一般的select一样
(2)绑定简朴的对象数据

在页面经由过程“ng-options”属性值,采纳”…as…for…in..”花样将对象与select绑定

《angularjs初识》

as前面的部份对应元素的value值,用于选中时猎取,背面的用于显现

《angularjs初识》
挑选小学后的结果

(3)一分组的情势绑定数据

《angularjs初识》

《angularjs初识》
是不是发现了什么差别想知道他的作用吗?
别急,下面就给你看
《angularjs初识》

有了这个只要两段的级联就可以省去了。

angularjs已用这个数组的grade值替他们分好了组了,是不是是觉得很壮大,angularjs另有许多壮大的处所等着我们去进修,控制它,另有更壮大的angular等着我们。

    原文作者:笙歌会停
    原文地址: https://segmentfault.com/a/1190000016301984
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞