Change Detection (变化检测) 是 Angular 2 中最重要的一个特性。当组件中的数据发生变化的时候，Angular 2 能检测到数据变化并自动刷新视图反映出相应的变化。在介绍变化检测之前，我们要先介绍一下浏览器中渲染的概念，渲染是将模型映射到视图的过程。模型的值可以是 JavaScript 中的原始数据类型、对象、数组或其他数据对象。然而视图可以是页面中的段落、表单、按钮等其他元素，这些页面元素内部使用 DOM(Document Object Mode...
话不多说直入主题，最常见的有三种方式来引用第三方插件，下面以jquery插件及基于JQuery的两款插件：nicescroll和rangeSlider为例。 一、第一种方式：在.angular-cli.json文件中配置 步骤： 1.在项目根目录.angular-cli.json文件中找到script字段，在数组中添加要引用的所有js文件（注意先后顺序） "scripts": ["assets/jquery-3.2.1.js","assets/jquery.nicescroll.js","assets/ion.rangeSlider.js"], 2.在需要用该插件的组件中（...
要实现的功能类似下图，动态添加或者删除div 点击 增加可添加一条div 点击删除可删除一条divHTML代码如下：（省略CSS样式代码了大笑） <div class="accordion-inner"><div class="alert alert-info fade in" ng-repeat="permission in permissions">授权给:<select id="" class="grantees" disabled="" style=" margin-bottom: 3px;" ng-model="permission.grantee"><option value="everyone">所有人</option><option value="authe...
在Html页面中，有三个单选按钮，默认选中的是第二个“重要”这个选项，设置ng-checked="true"，把该选项默认选中，可是在提交表单时，却提示$scope.level为undefine状态,明明默认选中了为什么却是undefine呢？ 于是，先测试了一把：在Html页面写下下面的代码： <span style="font-size:18px;"><div ng-controller="testCtrl"> <div > <label > <input type="radio" value="Normal" ng-model="level" name="level" >一般 </label> <...
如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="agl/angular.min.js"></script><script>var app=angular.module("mpp",[]);app.controller("ctrl",function ($scope) {$scope.arr=[];$scope.add=function () {$scope.arr.push({name:$scope.name,password:$scope.password,age:$scope.age,sex:$scope.sex})}$scope.submit=function () {for (var i=0;i<$scope.arr.le...
需求：上面是一个table，运用了 <tr ng-repeat="rule in formData.ruleList track by $index">循环显示。现在的一个需求是：需要在每行添加一个字段，不过不能在同一行显示，需要在下一行显示。我首先想到了直接加个,不过没有办法换行。在下面再加个也不行。只能依赖强大的angulajs，自定义指令。下面我们就开始。 1 自定义指令 .directive(kbnTableRow,function($compile) {return {restrict : A,link : function(scope, element)...
在项目中，api要求的数据格式为 $scope.data = {"name":"zhangsan","Menus": [{"id":1},{"id":2}] }而我的返回格式为$scope.data=["name":"zhangsan"]$scope.selected = [1，2，3];需要将两个数组整合，其中$scope.selected要先转化为json对象，再进行push操作。 代码如下： // 将menu数组转化为json格式self.convertJson = function (callback) {//传入数组为$scope.selected，每循环一遍就push一次angular.forEach($scope.select...
废话少说，直接上代码：<div class="col-xs-3"><input type="radio" ng-value=1 ng-model="sss" name="aaa" >男</label><label><input type="radio" ng-value=0 ng-model="sss" name="aaa">女</label> </div> <div>{{sss}} </div>在ng中使用radio实现二选一的时候，需要注意几个地方： 第一：保持name的属性值要是一致的； 第二：保持ng-model对应同一个值； 第三：需要为每个radio设置ng-value，因为ng-model的对应的值就是选中的...
最近在写一个日期选择器组件，为了满足将来可能出现的各种需求，所以需要能够高度的自定义组件的样式。为了达到这个目的，需要能够在日期选择器组件外控制每个日期格子内要显示的内容，比如，标上节假日之类的。这时候，组件的一部分模板就需要由调用方提供。 在 React 里面，这种需求挺简单的，只要实现一个 date => Element 这样的函数就好了，但是 Angular 模板是纯粹的模板，需要使用一些专门的概念才能实现这个功能。 第一种方...
Angular 2.3 版本中引入了组件继承的功能，该功能非常强大，能够大大增加我们组件的可复用性。组件继承涉及以下的内容：Metadata：如 @Input()、@Output()、@ContentChild/Children、@ViewChild/Children 等。在派生类中定义的元数据将覆盖继承链中的任何先前的元数据，否则将使用基类元数据。Constructor：如果派生类未声明构造函数，它将使用基类的构造函数。这意味着在基类构造函数注入的所有服务，子组件都能访问到。Lifecycle...
1.文件上传框html代码如下 <form id="fileForm" enctype="multipart/form-data"><button id="import_asset" type="button" ng-click="import_asset()">上传文件</button><input id="file_asset" type="file" style="display: none;"/> </form>*注意： 设置form的enctype属性值为：multipart/form-data2：js代码如下： $scope.import_asset = function () {$("#file_asset").click(); }; $("#file_asset").on("change", function(){...
本文实例讲述了Angular2.0实现modal对话框的方法。分享给大家供大家参考，具体如下： 觉得写的比较巧妙的就是样式的选取~记录下 CSS部分 .font {font-family: "Microsoft YaHei", Arial;font-size: 12px;color: #333333; } .ky-modal-content {min-width: 520px;min-height: 240px; } .ky-modal-header {/*height : 40px;*/padding: 0 10px 0 10px; } .ky-modal-title {font-size: 16px;font-weight: 100; } .ky-modal-body {min-h...
如何Lodash 是 JavaScript 很有名的 package，尤其對於處理 array 很有一套，Angular 該如何使用 lodash 呢 ? 這也可以視為在 Angular 使用傳統 JavaScript package 的 SOP。 Version Node.js 8.9.4 Angular CLI 1.6.2 Angular 5.2.2 安裝 Lodash ~/MyProject $ npm install lodash --save使用 npm 安裝 lodash 。 安裝 Lodash Type 定義檔 ~/MyProject $ npm install @types/lodash --save-dev傳統 JavaScript 並沒有型別，但 Typ...
本文实例讲述了AngularJS实时获取并显示密码的方法。分享给大家供大家参考，具体如下： 1、设计源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.gxlcms.com - AngularJS获取密码</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body><div ng-app=""><p>密码：<input type="password" ng-model="password" maxlength="12"></p><p ng-bind="password"></p></div> </body> ...
Angular 和 React 都是伟大的框架/库。Angular 提供了 MVC（模型、视图、控制器）的定义结构。React 提供基于状态变化的轻量级呈现机制。通常情况下，开发者在 AngularJS 上有一个旧的应用程序后，他们会想用 ReactJS 建立新的特性。 虽然将 AngularJS 应用移除，从头开始建立一个 ReactJS 应用是不错的选择。但对于大规模应用来说，它不是一个可行的解决方案。在这种情况下，单独建立一个 React 组件并将其导入 Augular 会更容易。...