个人中心
gpt4 book ai didi

AngularJS语法详解

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 30 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章AngularJS语法详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

模板和数据的基本运作流程如下:

用户请求应用起始页面 用户的浏览器向服务器发起一次http连接，然后加载index.html页面，这个页面包含了模板 angular被加载到页面中，等待页面加载完成，查找ng-app指令，用来定义模板的边界 angular遍历模板，查找指定和绑定关系，将触发一些列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。最后，应用将会启动起来，并将模板转换成DOM视图 连接到服务器去加载需要展示给用户的其他数据 。

显示文本 。

一种使用{{}}形式，如{{greeting}} 第二种ng-bind="greeting" 。

使用第一种，未被渲染的页面可能会被用户看到，index页面建议使用第二种，其余的页面可以使用第一种 。

表单输入 。

  。

复制代码 代码如下:

<html ng-app>
<head>
    <title>表单</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
    function StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        computeNeeded = function() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch('funding.startingEstimate',computeNeeded); //watch model的变化
    }
    </script>
</head>
<body>
    <form ng-controller="StartUpController">
        Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">  //change的时候调用函数
        Recommendation: {{funding.needed}}
    </form>
</body>
</html>

  。

在某些情况下，我们不想一有变化就立刻做出动作，而是要进行等待。例如:

  。

复制代码 代码如下:

<html ng-app>
<head>
    <title>表单</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
    function StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        computeNeeded = function() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch('funding.startingEstimate',computeNeeded);//watch监视一个表达式，当这个表达式发生变化时就会调用一个回调函数
        $scope.requestFunding = function() {
            window.alert("Sorry,please get more customers first.")
        };
    }
    </script>
</head>
<body>
    <form ng-submit="requestFunding()" ng-controller="StartUpController">  //ng-submit
        Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
        Recommendation: {{funding.needed}}
        <button>Fund my startup!</button>
    </form>
</body>
</html>

  。

非表单提交型的交互，以click为例 。

  。

复制代码 代码如下:

<html ng-app>
<head>
    <title>表单</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
    function StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        computeNeeded = function() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch('funding.startingEstimate',computeNeeded);
        $scope.requestFunding = function() {
            window.alert("Sorry,please get more customers first.")
        };
        $scope.reset = function() {
            $scope.funding.startingEstimate = 0;
        };
    }
    </script>
</head>
<body>
    <form ng-controller="StartUpController">
        Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
        Recommendation: {{funding.needed}}
        <button ng-click="requestFunding()">Fund my startup!</button>
        <button ng-click="reset()">Reset</button>
    </form>
</body>
</html>

  。

列表、表格以及其他迭代型元素 。

ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下:

  。

复制代码 代码如下:

<html ng-app> <head>     <title>表单</title>     <script type="text/javascript" src="angular.min.js"></script>     <script type="text/javascript">     var students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]     function StudentListController($scope) {         $scope.students = students,

  。

    }     </script> </head> <body>     <table ng-controller="StudentListController">         <tr ng-repeat='student in students'>             <td>{{$index+1}}</td>             <td>{{student.name}}</td>             <td>{{student.score}}</td>         </tr>     </table> </body> </html> 。

  。

隐藏与显示 ng-show和ng-hide功能是等价的，但是运行效果正好相反.

  。

复制代码 代码如下:

<html ng-app>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script>
  function DeathrayMenuController($scope) {
    $scope.menuState = {show:false };//这里换成menuState.show = false 效果就显示不出来了。以后声明变量还是放在{}里面吧
    $scope.toggleMenu = function() {
      $scope.menuState.show = !$scope.menuState.show;
    };
  }
</script>
</head>
<body>
<div ng-controller='DeathrayMenuController'>
  <button ng-click='toggleMenu()'>Toggle Menu</button>
  <ul ng-show='menuState.show'>
    <li ng-click='stun()'>Stun</li>
    <li ng-click='disintegrate()'>Disintegrate</li>
    <li ng-click='erase()'>Erase from history</li>
  </ul>
</div>  
</body>
</html>

  。

css类和样式 。

ng-class和ng-style都可以接受一个表达式，表达式执行的结果可能是如下取值之一:

表示css类名的字符串，以空格分隔 css类名数组 css类名到布尔值的映射 代码示例如下:

  。

复制代码 代码如下:

<html ng-app> <head> <style type="text/css">     .error {         background-color: red;     }     .warning {         background-color: yellow;     } </style> <script type="text/javascript" src="angular.min.js"></script> <script>   function HeaderController($scope) {     $scope.isError = false;     $scope.isWarning = false,

  。

    $scope.showError = function() {         $scope.messageText = "Error!!!!"         $scope.isError = true;         $scope.isWarning = false;     } 。

    $scope.showWarning = function() {         $scope.messageText = "Warning!!!"         $scope.isWarning = true;         $scope.isError = true;     }   } </script> </head> <body> <div ng-controller="HeaderController"> <div ng-class="{error:isError,warning:isWarning}">{{messageText}}</div>     <button ng-click="showError()">Error</button>     <button ng-click="showWarning()">Warning</button> </div> </body> </html> 。

  。

css类名到布尔值的映射 示例代码如下:

  。

复制代码 代码如下:

<html ng-app> <head> <style type="text/css">     .selected {         background-color: lightgreen;     } </style> <script type="text/javascript" src="angular.min.js"></script> <script>     function Restaurant($scope) {         $scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}],

  。

        $scope.selectRestaurant = function(row) {             $scope.selectedRow = row;         }     } </script> </head> <body> <table ng-controller="Restaurant">     <tr ng-repeat='restaurant in list' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'>  //css类名到布尔值的映射,当模型属性selectedRow的值等于ng-repeat中得$index时，selectd样式就会被设置到那一行         <td>{{restaurant.name}}</td>         <td>{{restaurant.cuisine}}</td>     </tr> </table> </body> </html> 。

  。

最后此篇关于AngularJS语法详解的文章就讲到这里了,如果你想了解更多关于AngularJS语法详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

30 4 0
文章推荐： AngularJS语法详解（续）
文章推荐： Jquery动态替换div内容及动态展示的方法
文章推荐： JQuery选择器绑定事件及修改内容的方法
文章推荐： angular中使用路由和$location切换视图
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com