关于angular的一些新手容易忽略的小知识点

时间：2022-09-21 14:04:36

1.解决页面刚加载时使用{{name}}这种方式绑定数据会有一瞬间的表达式显示的问题

方法一：  使用ng-bind来绑定数据，

方法二：  添加ng-cloak指令；如

<div ng-app="">

<p ng-cloak>{{ 5 + 5 }}</p>

</div>

2.ng-change指令

1.定义和用法：

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。

ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

实例：

<body ng-app="myApp">

<div ng-controller="myCtrl">
    <input type="text" ng-change="myFunc()" ng-model="myValue" />
    <p>The input field has changed {{count}} times.</p>
</div>

<script>

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.myFunc = function() {
        $scope.count++;
    };
}]);
</script>

</body>

3.ng-checked指令

定义和用法：

ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。

如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

实例：<body ng-app="">
<p>My:</p>
<input type="checkbox" ng-model="all"> Check all<br><br>

<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes
</body>

4.ng-class指令

定义和用法：

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

实例：

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>

<div ng-class="home">
    <h1>Welcome Home!</h1>
    <p>I like it!</p>
</div>

5.ng-switch指令

定义和用法：

ng-switch 指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。

你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

实例：

<element ng-switch="expression">
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-default></element>
</element>

6.获取html中元素的内容

例如：需要删除表格中的某一条数据，需要先拿到这条数据，这时就可以使用传参的方式获取到具体的某条你想要的数据了。

实例：

<tr ng-repeat="x in data">
    <td ng-click="remove(x.id)" ng-bind="x.name"></td>
</tr>

$scope.remove = function(id){
    alert(id)
};

7.切记用ng-if代替ng-show

这是angular的一个小坑,也可以说是不大不小的一个坑.一些长列表数据,可能有一些东西是通过默认隐藏,点击显示的形式展现的.而这部分可控制显隐的内容中也会伴随很多数据绑定.这个在页面渲染的时候非常影响性能.

举一个列子,比如说通常angular建议一个页面的数据绑定不超过2000个,假如现在有一个页面直接绑定了2000个model,然后你加载,会发现非常卡.如果你将每100的model设置为ng-show,默认情况下不显示,你会发现还是很卡.

然后你将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用.原因在ng-show还是会执行其中的所有绑定,ng-if则会在等于true,也就是显示的时候再去执行其中的绑定.这样一来性能就有很大的提高,我之前通过这个简单的修改,页面加载快了10倍左右.

所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧.

8.解决select下拉第一个选项为空白的问题

在angular设置select时，由于没有设置默认的选择项，就会导致第一个option中的值为undefined，选择其他值时，option为undefined的选项却自动消失了，这说明是在代码中没有设置select的默认选项。如果select有值，则显示正常。在代码中，初始化select的默认值即可。更改代码如下：

<select ng-model="prov" ng-change="changeProv()" ng-init="prov='sichuan'">
<option ng-repeat="prov in provs" value={{prov.name}}>{{prov.value}}</option>
</select>
<select>
<option ng-repeat="value in city">{{value}}</option>
</select>

只需要添加红色的代码，即可使其默认选中一个。

 

关于angular的一些新手容易忽略的小知识点的更多相关文章

  1. javascript 容易忽略的小知识点 new到底做了什么？

    问题:平时我们经常写 var ss = new Person():ss就是一个由'Person类'生成的对象了,可是我们的Person方法里却没有写 return: (var ss= Person() ...

  2. springmvc中那些易被忽略的小知识点

    1.springmvc会为没有view的modelandview指定默认view 知道这个的时候我都惊呆了. 我从来都是手动指定view名字,今天看到别人写的代码竟然直接返回了个mav,貌似是在dis ...

  3. 学习Java，容易被你忽略的小细节（3）

    在<学习Java,容易被你忽略的小细节(2)>中我们已经深入讨论过String类中equals()方法的使用,在本文中我们将进一步讨论equals()方法在其他境况下的使用方法. 首先,我 ...

  4. 学习Java，容易被你忽略的小细节（2）

    昨天心情真的太糟糕了,写完<学习Java,值得注意你注意的问题(1)>之后,迎来些许的支持以后就是一片片的谴责.我的主页上涌现出许许多多Java方面的牛人,谴责我水平太低,写的问题太初级. ...

  5. 学习Java，值得你留意的问题（1）更名为《学习Java，容易被你忽略的小细节（1）》

    记得大二快要结束的时候,有个女孩子突然问我“你会Java吗,帮我做大作业好吗?” 实话说,那个女孩真的很漂亮,我当时也非常想帮她.但是我从来没有接触过Java,让我在短短的几天内完成Java程序设计课 ...

  6. Fiddler使用过程中容易忽略的小技巧

    fiddler的基本使用,在之前的一篇博文中有详细介绍,可参见Fiddler抓包工具使用详解,今天来分享几个容易忽略的小技巧. 1.ios机装了证书,依然抓不到包 近期总被同事问及ios机装了证书,但 ...

  7. 给Java新手的一些建议----Java知识点归纳&lpar;J2EE and Web 部分&rpar;

    J2EE(Java2 Enterprise Edition) 刚出现时一般会用于开发企业内部的应用系统,特别是web应用,所以渐渐,有些人就会把J2EE和web模式画上了等号.但是其实 J2EE 里面 ...

  8. 用idea做springboot开发，设置thymeleaf时候，新手容易忽略误区

    最近小编因为工作原因需要完成工厂自动化改造,而思来想去觉得还是用Java开发,因为很久没有敲过代码,对java这块已经抛掉很多年.作为工厂自动开发或者大型企业级开发,个人认为java和C#会比较合适, ...

  9. Vue还有这种操作？浅析几个新手常常忽略的API

    一:实现子组件与父组件双向绑定的"sync": 一般来说,我们实现父子组件值的传递通常使用的是[props]和自定义事件[$emit].父组件通过[props]将值传给子组件,子组 ...

随机推荐

  1. Find Median from Data Stream

    常规方法 超时 class MedianFinder { vector<int> coll; public: MedianFinder(){ } void heapfu(vector&lt ...

  2. linux命令行下的ftp 多文件下载和目录下载

    安装:yum install ftp 使用:ftp + ip (未进入ftp状态下运行) ----------------------------------------- 目标ftp服务器是一个非标 ...

  3. selenium实例：unittest框架&plus;PO开发模式

    这是<selenium2+python学习总结>的升级版. 1.         项目结构 2.         项目代码 1)         globalparameter.py # ...

  4. maven jsp out&period;print&lpar;&rpar;request&period;getParameter&lpar;&rpar; 爆红

    如图: 解决方案: 在pom文件中添加依赖: <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/jsp-api -->&l ...

  5. django日志&comma;django-crontab&comma;django邮件模块

    django 日志 四大块,格式器,过滤器,处理器,日志管理器 LOGGING = { 'version': 1, 'disable_existing_loggers': True, 'formatt ...

  6. 安卓自定义TextView实现自动滚动

    xml文件代码 <com.mobile.APITest.ScrollEditText android:id="@+id/statusEditText" android:lay ...

  7. django channle的使用

    频道在PyPI上可用 - 要安装它,只需运行:   参照:https://channels.readthedocs.io/en/latest/introduction.html pip install ...

  8. Java方法重载的区分

    测试程序代码: class Computer { private int x; public Computer(){ this(10); } /** * 构造方法重载 * @param x */ pu ...

  9. C&num;基础篇九OOP属性结构枚举

    1.设计一个Ticket类,有一个距离属性(本属性只读,在构造方法中赋值),不能为负数,有一个价格属性,价格属性只读,并且根据距离计算价格(1元/公里):-----------0-100公里 票价不打 ...

  10. linux设置永久环境变量

    vi /etc/profile 文件最后输入export PATH=$PATH:/usr/abc/def/ 保存 输入source /etc/profile刷新刚刚修改过的环境变量文件

相关文章