angularjs初识

最新推荐文章于 2024-07-26 11:09:07 发布

??yy

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量102

点赞数

文章标签： javascript php ViewUI

原文链接：https://segmentfault.com/a/1190000016301984

版权

周三的时候跟着老师简单的入门了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的数据双向绑定配合使用可以轻松实现一些看着比较高级的操作

点击选中效果和隔行颜色变化
代码如下：

<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绑定

as前面的部分对应元素的value值，用于选中时获取，后面的用于显示

选择小学后的效果

（3）一分组的形式绑定数据

是否发现了什么不同想知道他的作用吗？
别急，下面就给你看

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

angularjs已经用这个数组的grade值替他们分好了组了，是不是感觉很强大，angularjs还有很多强大的地方等着我们去学习，掌握它，还有更强大的angular等着我们。

??yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs初识

周三的时候跟着老师简单的入门了angularjs，然后去图书馆找了一本《Angularjs实战》来看了看，虽然这本书网上的评价不太高，但对于初学者的我来说还是不错的，有较详尽的示例代码和比较清楚的代码讲解。总的来说，收获很大。这里这里就以一些常用的html标签谈谈angularjs中的基础知识。全局对象window在angularjs...
复制链接

扫一扫