初步认识Angulajs

　　 Angulajs是一个MVC前段框架，项目中使用Angulajs必须按照框架的写法编写代码，可以统一代码规范易于后期代码的维护。

M Model 模型-数据，V View 视图-表现层 HTML/CSS，C Controller 控制器-业务逻辑，M和V耦合性高，C特别臃肿编写大段的代码

Angular的核心是数据，一切问题从数据本身考虑。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="img/angular.js" charset="UTF-8"></script>

    </head>

    <body>

        <div ng-app="">

            <input type="text" name="" value="" ng-model="a" >

            <div class="" ng-bind="a"></div>

            <select ng-model="a">

                <option value="1">北京市</option>

                <option value="2">洛阳市</option>

                <option value="3">商丘市</option>

            </section>

        </div>

    </body>

</html>

双向绑定 ng-model
数据变了<->视图变化（V <-> M）
自动同步数据和视图ng-model 双向绑定

ng-bind 输出数据

ng-app 被angularjs管理（将angularjs代码包在里面才管用）

angularjs的表达式 {{}}

ng-bind 和 {{}}一样也是用来绑定数据的，比ng-bind方便。

ng-init 用来初始化数据的

<!DOCTYPE html>

<html ng-app="">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="img/angular.js" charset="utf-8"></script>

  </head>

  <body ng-init="a=0;b=0;">

    <input type="text" ng-model="a">

    <input type="text" ng-model="b">

    <span>{{a*b}}</span>

  </body>

</html>

Angularjs遍历数组和·json对象

数组：

<!DOCTYPE html>

<html ng-app="">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="img/angular.js" charset="utf-8"></script>

  </head>

  <body ng-init="arr=[12,5,8,9,10,12,12]">

    <ul>

      <li ng-repeat="item in arr track by $index">{{item}}</li>
　　　// <li ng-repeat="item in arr>{{item}}</li>
　　
   </ul>

</html>

ng -repeat 遍历数组或者josn

问题：数组中一旦有重复的数据就无法遍历 ng -repeat 为了保证效率它需要key和value一一对应，需要每个元素有个单独的key，而数组没有key，所以吧数组的元素当成默认的key，数组中不能有重复的的元素，一旦重复就无法遍历了
解决：track by $index 它是吧数组的下标当成key了解决了问题效率不好，因为只要插入或者添加一个元素数组的下标就会改变。

json对象：

<!DOCTYPE html>

<html ng-app="">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="angular.js" charset="utf-8"></script>

  </head>

  <body ng-init="arr=[{user: '王五', age: 18}, {user: '张三', age: 23}, {user: '李四', age: 25}, {user: 'blue', age: 18}]">

    <ul>

      <li ng-repeat="json in arr">姓名：{{json.user}}，年龄：{{json.age}}</li>

    </ul>

  </body>

</html>

json对象遍历不存在用ng-repeat的问题

json对象用ng-repeat遍历的方式

<li ng-repeat="(k,v) in json">{{k}}, {{v}}</li> 取出key的值
<li ng-repeat="val in arr">{{$index}}, {{val}}</li>

留言板实例

<!DOCTYPE html>

<html ng-app="">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="img/angular.js" charset="utf-8"></script>

  </head>

  <body ng-init="arr=[{name: '咸鱼', content: '大家好啊'}, {name: '张三', content: '挺好呀'}]">

    名字：<input type="text" name="" value="" ng-model="name"><br>

    内容：<input type="text" name="" value="" ng-model="content"><br>

    <input type="button" value="提交" ng-click="arr.unshift({name: name, content: content})">

    <ul>

      <li ng-repeat="json in arr">

        <h4>{{json.name}}</h4>

        <p>{{json.content}}</p>

      </li>

    </ul>

  </body>

</html>

秒客网

初步认识Angulajs

相关文章