AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model

最新推荐文章于 2020-09-12 11:01:57 发布

Paul_Huang_2011

最新推荐文章于 2020-09-12 11:01:57 发布

阅读量3.4k

点赞数

分类专栏： Web前端文章标签： AngularJS

本文链接：https://blog.csdn.net/hbr2014/article/details/45582757

版权

Web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

AngularJS的绑定：

ng-bind可用于绑定变量, {{ 表达式}} 内放置变量时，作用与ng-bind相同。如下例：

<!doctype html>
<html>
<head>
    <script
                    src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
    <h2>欢迎来到  <span style="font-family: Arial, Helvetica, sans-serif;">HBR </span><span style="font-family: Arial, Helvetica, sans-serif;">{{helloTo.title}}  的世界!</h2></span>
</div>

<p>输入您的名字: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>

<script>
    angular.module("myapp", [])
            .controller("HelloController", function($scope) {
                $scope.helloTo = {};
                $scope.helloTo.title = "AngularJS";
            });
</script>
</body>
</html>

实际上，ng-bind与下列HTML代码的效果相同

<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello {{name}}!</p>

但是，{{ }}还可以用于求表达式的值，比如{{ 5+5}}，HTML页面会显示结果10。

下面，我们来学习下AngularJS的几个Directives:

ng-app —— 启动angular应用

ng-init —— 初始化应用数据变量

ng-model —— 定义模型

ng-repeat —— 重复HTML元素，与循环类似

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular JS的四个Directives</title>
    <script src="bower_components/angular/angular.js"></script>
</head>
<body>
<h1>样例</h1>
<div ng-app="" ng-init="fruits=[{name:'苹果', location:'北方'},
                                    {name:'橘子',location:'南方'},
                                    {name:'桃子', location:'全国'}]">

    <p>水果产地列表:</p>
    <ol>
        <li ng-repeat="fruit in fruits">
            {{ '水果: ' + fruit.name + ', 产地: ' + fruit.location }}
        </li>
    </ol>
</div>

</body>
</html>

Paul_Huang_2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model

AngularJS的绑定：除了用{{ }}进行绑定外，还可以使用ng-bind,比如： <script src="bower_components/angular/angular.js"> 欢迎来到 HBR {{helloTo.title}} 的世界!输入您的名字: Hello ! angular.
复制链接

扫一扫

专栏目录