前端之angular常用方法

最新推荐文章于 2024-01-14 15:51:42 发布

qq_597221342

最新推荐文章于 2024-01-14 15:51:42 发布

阅读量251

点赞数

分类专栏：前端之框架

本文链接：https://blog.csdn.net/qq_36251118/article/details/81058101

版权

前端之框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
 <meta charset="utf-8">
 <title>angular</title>
</head>
<body>

 <div ng-app="myApp">
  <div ng-controller="myCtrl">
    <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
      <option value="">--请选择--</option>
    </select>
    <select ng-model="selectedSites" ng-options="y for (x,y) in sites">
      <option value="">--请选择--</option>
    </select>
    <pre>
      {{selectedCar|json}}
      {{selectedSites|json}}
    </pre>

    <div class="col-md-12">
      <div class="form-inline">
        <label>
          <input type="checkbox" ng-model="plan.lastYear" ng-click="clickLastYear(plan.lastYear)">
         根据上一年xxx生成公区预算明细</label>
      </div>
      <div class="form-inline">
         <label >
          <input type="checkbox"  ng-model="plan.custom" ng-click="clickContent(plan.custom)">
         自定义</label>
      </div>
    </div>
    <div>
      <input type="radio" name="genderJS3" ng-model="genderJS33" value="1">男
      <input type="radio" name="genderJS3" ng-model="genderJS33" value="2">女
      <pre>
        {{genderJS33}}
      </pre>  
    </div>
    <div>
      {{formatDate}}
    </div>
    <div>
     {{now | date : 'yyyy-MM-dd HH:mm:ss'}}
    </div>
     <div>
      <table id="tb_1" cellspacing="0" cellpadding="2" width="100%" border="1">
        <thead>
            <th ng-repeat="hd in headList">{{hd.code}}</th>
        </thead>
        <tbody> 
             <tr ng-repeat="data in tableData">
                <td ng-repeat="hd in headList">
                    <input type="text" ng-model="data[hd.code].value" />
                </td>
            </tr> 
         </tbody> 
      </table>
    </div>

  </div>
 </div>
 <script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope,$filter) {
      //复杂对象
      $scope.cars = {
      car01 : {brand : "Ford", model : "Mustang", color : "red"},
      car02 : {brand : "Fiat", model : "500", color : "white"},
      car03 : {brand : "Volvo", model : "XC90", color : "black"} }
      //简单对象
      $scope.sites = {
          site01 : "Google",
          site02 : "Baidu",
          site03 : "Taobao"
       };

      $scope.plan = {
        lastYear:false,
        custom:true
      };
      $scope.clickLastYear=function(lastYear){
          console.log(lastYear);
      }
      $scope.clickContent=function(custom){
        console.log(custom);
      }
      $scope.genderJS33 = "2";
      var today = new Date();
      $scope.formatDate = $filter('date')(today, 'yyyy-MM-dd HH:mm:ss');
      $scope.now=new Date();

      $scope.headList = [
        {code:"packageCounts"},
        {code:"volume"},
        {code:"volumeUnit"},
      ]
      $scope.tableData = [
        {
            packageCounts:{name:"包装件数",value:'1'},
            volume:{name:"体积(方)",value:'2'},
            volumeUnit:{name:"体积单价",value:'3'}
        }
      ]
  });

 </script>
</body>
</html>

qq_597221342

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之angular常用方法

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"&gt;&lt;/script&gt; &lt;meta charset="utf-8"&gt; &
复制链接

扫一扫