4.基本指令model 和bind和click

最新推荐文章于 2024-03-06 15:31:35 发布

转载最新推荐文章于 2024-03-06 15:31:35 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/oneboi/blog/794080

文章标签：

#javascript #ViewUI

本文详细介绍了AngularJS中实现数据双向绑定的两种主要方式：ng-model和ng-bind。通过实例展示了如何利用ng-model指令实现HTML元素与应用程序数据的双向同步，并对比了ng-bind指令与AngularJS表达式的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

#1. ng-model

把应用程序数据绑定到HTML元素，实现model和view的双向绑定。

定义数据来源

在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。

示例，使用ng-model指令对数据进行绑定。

<div ng-app="">
请输入任意值：<input type="text" ng-model="name" />
你输入的为： {{ name }}
</div>

ng-model把相关处理事件绑定到指定标签上，这样我们就可以不用在手工处理相关事件(比如change等)的条件下完成对数据的展现需求。

以上介绍了ng-model的单向绑定(view->model)后面控制器我们会用到它的双向绑定功能

#2. ng-bind

指令ng-bind和AngularJS表达式{{}}有异曲同工之妙，但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

使用ng-bind指令绑定把应用程序数据。

<div ng-app="">请输入一个名字：<input type="text" ng-model="name" />
Hello <span ng-bind="name"></span></div>

浏览器需要首先加载页面，渲染它
AngularJS解析

PS：使用{{}}花括号语法时，因为浏览器需要首先加载页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容，所以对于首个页面中的数据绑定操作，建议采用ng-bind，以避免其未被渲染的模板被用户看到。

3. 事件指令

AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

#4. ng-click

AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

对按钮、链接等，我们都可以用ng-click指令属性来实现绑定，如下简单示例：

<div ng-app="" ng-init="click=false">

 <button ng-click="click= !click">隐藏/显示</button>//后面的值是一个东东

 <div ng-hide="click">

   请输入一个名字：<input type="text" ng-model="name" /

        Hello <span ng-bind="name">
        </span> 
    </div>
    </div>

PS：ng-hide="true"，设置HTML元素不可见。