AngularJS语法详解_AngularJS-js教程-PHP中文网

AngularJS语法详解_AngularJS

php中文网

发布： 2016-05-16 16:18:16

原创

1529人浏览过

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

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

显示文本

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

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

表单输入

《PHP程序设计》第二版

本书图文并茂，详细讲解了使用LAMP（PHP）脚本语言开发动态Web程序的方法，如架设WAMP平台，安装与配置开源Moodle平台，PHP程序设计技术，开发用户注册与验证模块，架设LAMP平台。　本书适合计算机及其相关专业本、专科学生作为学习LAMP（PHP）程序设计或动态Web编程的教材使用，也适合对动态Web编程感兴趣的读者自觉使用，对LAMP（PHP）程序设计人员也具有一定的参考价值。

730

查看详情

复制代码代码如下:

    表单

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

复制代码代码如下:

    表单

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

复制代码代码如下:

    表单

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

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

复制代码代码如下:

    表单

{{$index+1}}
{{student.name}}
{{student.score}}

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

复制代码代码如下:

Stun

Disintegrate

Erase from history

css类和样式

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

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

复制代码代码如下:

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

复制代码代码如下:

<script><br />
    function Restaurant($scope) {<br />
        $scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}];
<p>        $scope.selectRestaurant = function(row) {<br />
            $scope.selectedRow = row;<br />
        }<br />
    }<br />
</script>

      //css类名到布尔值的映射,当模型属性selectedRow的值等于ng-repeat中得$index时，selectd样式就会被设置到那一行

{{restaurant.name}}
{{restaurant.cuisine}}