Angular.js学习1.1

1.div的显示和隐藏（注重的是数据的传输）
ng-click指令：

<input type="button" name="name" value="按钮" ng-click="a=!a">
<div ng-show="a" style="width: 200px; height: 200px; background: #ccc;"></div>

2.li的循环遍历
用了angular以后发现那么鬼好用….
以前原生js咱还要先获取ul然后创建子节点li….（留下了委屈的眼泪.jpg）
而angular立马省事了好多，关注于数据的传输，所以不需要获取啥的，直接就是在数组里面添加数据就OK了。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="angular.js"></script>
</head>
<body  ng-init="arr=[12,5,8,9,33,75];">
   //1.创建一个ng模型命名为a
   <input type="text" name="name" ng-model="a">
   //点击按钮时将a模型输入的值添加到arr数组中
   <input type="button" name="name" value="添加" ng-click="arr.push(a)">
   <ul>
      <li ng-repeat="item in arr">{{item}}</li>
   </ul>
</body>

3.AngularJS控制器
controller指令：用于AngularJS应用添加控制器
实现a*b

<!DOCTYPE html>
<html ng-app="main_mod">
<head>
    <meta charset="utf-8">
    <title>AngularJS控制器</title>
    <script src="angular.js" charset="utf-8"></script>
    <script>
    var mod=angular.module('main_mod', []);
    //往模块里添加东西
    mod.controller('contr1', function ($scope){
        //controller代码

        //$scope——所有angular的数据都在$scope上
        $scope.a=12;
        $scope.b=5;
    });
    </script>
</head>
  <body ng-controller="contr1">
    <input type="text" name="name" value="" ng-model="a">
    <input type="text" name="name" value="" ng-model="b">
    <div>
      结果是：{{a*b}}
    </div>
</body>
</html>

实现a+b
咱知道这个字符串是不能加减的，那么怎么转变成int类型呢？原生js直接就parseInt转换了。但是呢前面也说过，angular和原生js是不互通的。那么怎么实现js和angular互通呢？—scope

 $scope.parseInt=function(n){
            return parseInt(n);
        }
----------
    <div>
      结果是：{{parseInt(a)+parseInt(b)}}
    </div>

Angular.js学习1.1

Angular.js学习1.1

猜你喜欢