简单的angular方法简介

来源：互联网发布：苹果联通4g劫持网络编辑：程序博客网时间：2024/05/17 23:43

使用指令创建应用 ng-app ng-controller="myCtrl"(必须要有这个)
            ng-app 一个应用只能有一个。如果有多个，以第一个为准
           ng-model 数据
           {{}} 表达式的作用：取数据

//创建一个input来输入数据

//可以接收input的数据并且展示出来

//和上面的作用一样只不过这个是绑定
<span ng-bind="name"></span>

//先创建输入框

单价:<input type="text" ng-model="price" />
数量:<input type="text" ng-model="count" /><br />

//angular有自己的计算输入信息后可以直接展示（也可以用绑定的来计算）
<span>{{price*count}}</span>

ng-click
          ng-repeat
           ng-repeat="good in goods"
           相当于遍历goods数组

          数组

ng-controller="myCtrl" 控制器
几个的合集

//一个简单小案例

//建立一个表格

  <table border="1px" cellspacing="0px" cellpadding="0px">
   <tr><td>商品名</td><td>商品价格</td><td>商品数量</td>
  <td>商品总价</td><td>操作</td></tr>
   <tr ng-repeat="good in goods" ><td>{{good.gname}}</td>
    <td>{{good.gprice}}</td>
    <td>{{good.gcount}}</td>
    <td>{{good.gcount*good.gprice}}</td>
    <td><input type="button" value="删除" ng-click="dele($index)"/>
   </tr>

   </table>
  //调用方法
  <script type="text/javascript">
   //创建模块儿
   //angular 将一些功能封装起来形成模块儿
   //依赖注入：
   //依赖：就是一个类中用到另外一个类的对象
   //注入：将一个对象放入另外一个类

//注意moudle小写
   var mo = angular.module("myApp",[]);//参数1.应用名    参数2.依赖注入列表
   //创建控制器
   mo.controller("myCtrl",function($scope){//$scope 作用域，连接视图和数据的纽带

    //定义基本数据类型的数组
//    $scope.goods=[1,2,3,4,5,6];
    //定义元素是对象的数组
    $scope.goods=[{"gname":"足球","gprice":200,"gcount":5},{"gname":"蓝球","gprice":1000,"gcount":3}];

    //方法
    $scope.dele = function($index){
     $scope.goods.splice($index,1);
    }

   });//参数1.控制器的名字参数2 回调方法


  </script>

</body>

阅读全文

0 0