首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

AngularJS比较两个(作用域)数组并仅发布“非相同”结果(2018)

AngularJS是一种流行的前端开发框架,用于构建动态、交互式的Web应用程序。在AngularJS中,可以使用一些内置的方法和指令来比较两个作用域数组,并仅发布它们之间的“非相同”结果。

要比较两个作用域数组,可以使用AngularJS的$watchCollection方法。这个方法可以监视一个作用域中的集合,并在集合发生变化时执行回调函数。

下面是一个示例代码,演示了如何使用$watchCollection来比较两个作用域数组并发布非相同的结果:

代码语言:javascript
复制
$scope.array1 = [1, 2, 3, 4, 5];
$scope.array2 = [3, 4, 5, 6, 7];

$scope.$watchCollection('[array1, array2]', function(newValues, oldValues) {
  var nonDuplicateArray = [];

  // 遍历array1,将不在array2中的元素添加到nonDuplicateArray中
  angular.forEach(newValues[0], function(value) {
    if (newValues[1].indexOf(value) === -1) {
      nonDuplicateArray.push(value);
    }
  });

  // 遍历array2,将不在array1中的元素添加到nonDuplicateArray中
  angular.forEach(newValues[1], function(value) {
    if (newValues[0].indexOf(value) === -1) {
      nonDuplicateArray.push(value);
    }
  });

  // 打印非相同的结果
  console.log(nonDuplicateArray);
});

在上面的代码中,我们使用$watchCollection来监视array1array2这两个作用域数组。当它们发生变化时,回调函数会被触发。

在回调函数中,我们创建了一个空数组nonDuplicateArray来存储非相同的结果。然后,我们使用angular.forEach方法遍历array1array2,将不在另一个数组中的元素添加到nonDuplicateArray中。

最后,我们打印出nonDuplicateArray,即两个数组之间的非相同结果。

推荐的腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularJs指令解密

如果一个元素上具有两个优先级相同的指令,声明在前面的那个会被优先调用。如果其中一个的优先级更高,则不管声明的顺序如何都会被优先调用:具有更高优先级的指令总是优先运行。...这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。...如果元素上某个指令设置了terminal参数具有较高的优先级,就不要再用其他低优先级的指令对其进行修饰了,因为不会被调用。但是具有相同优先级的指令还是会被继续调用。...scope(布尔值Boolean | 对象Object) scope参数是可选的,默认为false: false:直接调用相同作用对象; true:从当前作用对象继承一个新的作用对象; 对象:...controllerAs (字符串String) 用来设置控制器的别名,可以以此为名来发布控制器,并且作用可以访问controllerAs。这样就可以在视图中引用控制器,甚至无需注入$scope。

2.2K70

Angular面试题_session面试题

但遵守 AngularJS 的约定时,生产力会很高,对 Java 程序员友好。 2.不利于 SEO 因为所有内容都是动态获取渲染生成的,搜索引擎没法爬取。...作用相关的一个坑(就是上文中 ng-if 产生一级作用的坑,其实也是 javascript 原型链继承中值类型继承的坑。...tElement为编译前的element function link(scope, iElement, iAttrs, controller) { … } iElement为编译后的element,已经与作用关联起来...apply会使ng进入 digest cycle , 并从 digest会检查该scope和它的子scope,当你确定当前操作影响它们时,用digest可以稍微提升性能。...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/180910.html原文链接:https://javaforall.cn

4.9K150

【Hybrid开发高级系列】AngularJS(一)——基础专题

属性即说明整个都是AngularJS脚本作用。...AngularJS作用理论非常重要:一个作用可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用 ,同时还有模板中的信息,数据模型和控制器。...想要更加深入理解AngularJS作用,请参看AngularJS作用文档。 2.5 测试         测试 “AngularJS方式”让开发时代码测试变得十分简单。...和AMD或者require.js这两个模块(AngularJS两个库)不同的是,AngularJS模块并没有试图去解决脚 加载顺序以及懒惰式脚 加载这样的问题。...,每次ngInclude的内容被请求的时候,都会发布该事件 viewContentLoaded(emit事件)         当ngView内容被重新加载时,从ngView作用发布 locationChangeStart

51980

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

2) 当调用 $digest 的时候,只触发当前作用和它的子作用上的监控,但是当调用 $apply 的时候,会触发作用树上的所有监控。 什么时候手动调用 $apply() 方法?...除了上面这种比较极端的情况,如果一个列表频繁拉取 Server 端数据自刷新的话也一定要手工添加 track by,因为接口给前端的数据是不可能包含 $$hashKey 这种东西的,于是结果就造成列表频繁的重建...第二点区别是,ng-if 会(隐式地)产生新作用,ng-switch 、 ng-include 等会动态创建一块界面的也是如此。...ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决? 会提示 Duplicates in a repeater are not allowed....对象,依次解析根节点后代,根据多种条件查找指令,完成每个指令相关的操作(如指令的作用,控制器绑定以及transclude等),最终返回每个指令的链接函数,并将所有指令的链接函数合成为一个处理后的链接函数

7.8K40

AngularJS 指令的定义、语法、用法

指令可以被重复使用,并且可以与控制器和作用(Scope)进行绑定,从而实现数据的双向绑定和页面元素的动态更新。...AngularJS 指令的用法AngularJS 指令可以在 HTML 代码中任何地方使用,并且可以与控制器和作用(Scope)结合使用,实现数据的双向绑定和页面元素的动态更新。...4.2 ng-repeat 指令ng-repeat 指令用于在 HTML 元素中重复渲染一段 HTML 代码,根据数组或对象的内容动态生成多个相同的...5.4 使用指令作用(Scope)指令可以与控制器和作用进行绑定,通过指定指令的作用,可以实现指令与其他组件的数据交互和消息传递。...同时,掌握一些实用技巧,如合理使用指令、遵循单一职责原则、使用模板和控制器以及使用指令作用,将使得我们的指令更加灵活、高效和易于维护。

29430

AngularJS浅谈-博客

具体点说: AngularJS 是一个 JavaScript 框架 AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src...6、注入器($injector)是用来创建“编译服务(\$compile service)”和“根作用(\$rootScope)”的。...7、编译服务(\$compile service)是用来编译DOM并把它链接到根作用(\$rootScope)的。 具体过程: AngularJS 应用程序由 ng-app 定义。...控制器的 $scope (相当于作用、控制范围)用来保存AngularJS Model(模型)的对象。 控制器在作用域中创建了两个属性 (firstName 和 lastName)。...数据:视图对象(viewobject)需要被AngularJs Scope(1.0中作为service出现)引用,可以使任何类型的javascript对象,数组,基本类型,对象。

2.4K30

AngularJs之Scope作用

在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用就产生了,由 ng-app 所生成的作用比较特殊,它是一个根作用($rootScope),它是其他所有$Scope 的最顶层。...args 属性设置到输入框中。...从此,两个输入框的内容所绑定的属性已经是两份不同的实例,因此不会再保持同步。 现将代码做如下修改,结合以上两个场景,会出现怎样的结果? 示例三:作用继承实例-对象数据继承 <!...所以,代码的运行结果是页面上有两个名为 nick的按钮。   我们还注意到 link 函数中对 isolates 进行了修改,但是最终不会在运行结果中体现。...双向绑定非常适用于一些子 directive 需要频繁和父作用进行数据交互,并且数据比较复杂的场景。

1.5K30

4-进军 angular1.x 控制器和过滤器

4-控制器和过滤器 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令,数据绑定 3-模型和作用 scope 4-控制器和过滤器 基本 AngularJS 应用程序被控制器控制...控制器的 $scope (相当于作用、控制范围)用来保存AngularJS Model(模型)的对象。 控制器在作用域中创建了两个属性 (firstName 和 lastName)。...ng-controller ="myCtrl" , 这个 myCtrl 也是属于一个 JavaScript 对象 控制器可以在一个 ng-app 下有多个,配合 $scope 来使用就类似 JavaScript 的作用...过滤器 概述 currency 格式化数字为货币格式 filter 从数组项中选择一个子集 lowercase 格式化字符串为小写 orderBy 根据某个表达式排列数组 uppercase 根据某个表达式排列数组...orderby orderBy 过滤器根据表达式排列数组: 根据 country 的首字母排序出现,当然我们可以试试 name AngularJS 实例 <div ng-app="myApp" ng-controller

1.9K30

2021vue经典面试题_vue面试题大全

**1.与AngularJS的区别** **2.与React的区别** 9、事件修饰符 10、组件中 data 为什么是函数 11、对于Vue是一套渐进式框架的理解 12、vue.js的两个核心是什么...1.与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令; 都支持过滤器:内置过滤器和自定义过滤器; 都支持双向数据绑定; 都不支持低端浏览器。...不同点: AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观; 在性能上,AngularJS依赖对数据做脏检查,所以Watcher...因为组件是用来复用的,JS 里对象是引用关系,这样作用没有隔离,而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。...12、vue.js的两个核心是什么? 数据驱动和组件化 13、vue中 key 值的作用 使用key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM。

2.1K10

Angular与MVVM框架

angular中关于源码的理解可按下图来进行学习,这里只总结几个比较重要的特性实现。 ?...通过调用上一步所说的链接函数来将模板与作用链接起来。这会轮流调用每一个指令的链接函数,让每一个指令都能对DOM注册监听事件,和建立对作用的的监听。这样最后就形成了作用的DOM的动态绑定。...任何一个作用的改变都会在DOM上体现出来。...更多可以参考[译]ng指令中的compile与link函数解析 $digest $watch存储了监听函数,当作用里的变量发生变化时,调用$digest方法便会执行该作用以及它的所有子作用上的相关的监听函数...,这个在创建指令并且scope属性定义的情况下,会触发这种情况,还有几种别的特殊情况,如果是独立作用的话,会多一个$root属性,这个默认是指向rootscope的 如果不是独立的作用,则会生成一个内部的构造函数

2.6K20

Angular与MVVM框架

通过调用上一步所说的链接函数来将模板与作用链接起来。这会轮流调用每一个指令的链接函数,让每一个指令都能对DOM注册监听事件,和建立对作用的的监听。这样最后就形成了作用的DOM的动态绑定。...任何一个作用的改变都会在DOM上体现出来。...更多可以参考[译]ng指令中的compile与link函数解析 $digest $watch存储了监听函数,当作用里的变量发生变化时,调用$digest方法便会执行该作用以及它的所有子作用上的相关的监听函数...,这个在创建指令并且scope属性定义的情况下,会触发这种情况,还有几种别的特殊情况,如果是独立作用的话,会多一个$root属性,这个默认是指向rootscope的 如果不是独立的作用,则会生成一个内部的构造函数...,另外,通过函数入参传递依赖的方式在严格模式下执行会抛出异常;第二种依赖传递则是通过数组的方式,数组的最后一个元素是需要使用依赖的函数。

3.9K90

JS 模块化历史简介

在 JavaScript 中,每个函数都有一个作用,所以在函数中声明的变量就只在这个函数中可见。即使有变量提升,变量也不会污染到全局作用域中。...下面让我们看几个 IIFE 的写法,每个 IIFE 的作用都是独立的,其中第一种写法比较常见: (function() { console.log('IIFE using parenthesis'...AngularJS 的依赖注入系统也面临同样的问题。有一个方法可以根据形参名字来解析模块,让开发者不用再写那个依赖数组,但是却对代码压缩工具不友好,因为压缩后变量名就变短了,也就找不到相应的依赖。...直到 AngularJS v1 之后,可以通过一种构建任务,将以下代码: module.factory('calculator', function(mathlib) { // … }) 转换成可压缩的带依赖数组的代码...在 CommonJS 中,每个文件都是一个模块,具有自己独立的作用

2.2K20
领券