Angularjs[4] - ngbind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name">
            <input type="text" value="" ng-model="age">
            <div ng-bind="name"></div>
            <div ng-bind="age"></div>
        </div>
    </div>
    <script>
        alert(‘!‘);
    </script>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>
var firstController = function ($scope) {
    $scope.name = ‘Alrale‘;
    $scope.age = ‘20‘;
};
{{name}}:
<div ng-bind="name"></div>:

  • ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了,指定替换的 HTML 元素也会修改。
时间: 2024-10-24 22:34:46

Angularjs[4] - ngbind的相关文章

04、AngularJS的ng-bind、多个控制器和apply

这篇,讲一下angularjs的ng-bind指令,多个控制器,以及手动触发angularjs的脏检查,我直接把代码贴,顺着代码讲. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body ng-app="ngApp"> &

angularjs入门-ng-bind,ng-cloak,ng-bind-template,sanitize

这边再陆续介绍一些有关Expression的部分,正常状况下我们都会使用{{hello}}来呈现数据内容.但是如果使用者浏览首页,而且同时下载比较多,或者是网络速度慢的时候,甚 至是程序有bug的话,就会看到如下的画面,这样子的画面不晓得还以为是bug 特别说明一下,但是因为{{}}的方式很方便,如果我们是使用spa的方式来开发,比如使用了ngroute或ui-router的方式的话.其实除了客户访问的首页之外,其余页面我们还是可以 使用{{}}的方式,至于ngroute或ui-router是什

angularjs之ng-bind和ng-model

1.为什么其他标签可以用ng-bind ,而input标签要用ng-model 这就是所谓的数据双向绑定,input是用于用户输入的,数据要从View传输到Controller中,而{{}}和ng-bind是用于从controller中得到数据然后显示在view中的 2.{{}}和ng-bind的区别 在angularjs中限制模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: <p ng-

AngularJS 数字-ng-bind

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> &l

AngularJS 对象-ng-bind

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> &l

AngularJS 字符串-ng-bind

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> &l

angularJS——ng-bind指令与插值的区别

在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: 1 <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: 1 <p ng-bind="text"></p> 这两种方式的效果都是一样的,其主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到.而使用第二种方法的视图不

AngularJS 表达式与ng-bind

初学 多看语法的具体表现  有助于理解 与实际应用 AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量. 实例 {{ 5 + 5 }} 或 {{ firstName + " &qu

VS2013 HTML 自定义angularJS标签 如ng-bind等

在路径: C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Packages\schemas\html 中将"commonHTML5Types.xsd"修改,增加以下代码: <xsd:attribute name="style" vs:builder="style" /> <xsd:attribute name="tabIndex" /&g