【AngularJS实现元素显示和隐藏的几个案例】教程文章相关的互联网学习教程文章

javascript – Angular JS,Protractor定位器,获取元素的直接子元素【代码】

我有一个网格,我想从中选择所有行,而不是行中的所有元素 行只是div,没有类等等,像这样(内容删除简洁)<div class="grid"><div></div><div></div><div></div><div></div><div></div> </div>通常使用量角器定位器你可以去元素(by.css(“.grid> div”)) 我的问题是网格已经是量角器元素,我无法控制它,但我仍然只想选择它的直接子节点.var gridElement = element(by.css(".grid"));所以我需要类似的东西var rows = gridElement.all(by.c...

javascript – AngularJs量角器:幻灯片菜单中的元素不可见【代码】

我带着更多的Protractor Q& A回来了.所以,我在尝试查找幻灯片菜单中的元素时遇到了一个问题. html片段:<div class="ng-scope" ui-view="navmenu"> <nav class="menu slide-menu-left ng-scope"><md-content class="md-default-theme" style="display: table" ng-click="slideMenuLeft()" tabindex="0"><button class="md-button md-default-theme" ng-transclude="" style="width:50%;height:72px;border-right:1px solid #ddd;bo...

javascript – 如何使用Angular有条件地向元素添加属性? (不仅属性数据,整个属性)【代码】

我有一些用角材料创建的链接.在那里我们使用链接和按钮< md-button>.现在我有一个链接,只有当url存在时我才需要添加href属性.否则它不应该有一个href. 原因是,我有下面的主要链接和子链接.具有子链接的主链接不能具有href.如果它确实至少有空的href,只要我点击它以展开子链接,它就会转到索引模板.有些主要链接没有任何子链接.所以,对于他们我需要href和链接与子链接我需要完全删除href.我怎样才能做到这一点?解决方法:我不是棱角分...

javascript – AngularJS在没有JQuery的情况下获取元素属性【代码】

我正在创建一个不使用JQuery的AngularJS站点.在指令中,传递的值是EngagementApp.directive('movingAside', function() {return {restrict : 'A',link : function(scope, element, attributes) {}} });而html看起来像:<div class="aside" moving-aside>...Content...</div>像element.clientHeight这样的事情返回一个未定义的. 如何在不使用JQuery和AngularJS函数的情况下获取元素的属性(高度,宽度,偏移量等)?解决方法:使用元素[0]...

javascript – AngularJS:删除父元素【代码】

根据$scope.items列表,我有重复的项目.在每个李我有一个复选框.我想要做的是捕获此复选框的更改事件并在那里完成我的工作.在$scope.change函数中执行. 完成工作后,我想删除已选中复选框的行. 我的代码到目前为止:<!doctype html> <html> <head><script src="http://code.angularjs.org/1.2.3/angular.min.js"></script><script>var app = angular.module('myapp', []);app.controller('mainController', function($scope) {$scope...

javascript – AngularJS:如何调试’已经使用此元素引导的应用’错误【代码】

在我的AngularJS应用程序中,我在加载我的网站时遇到以下错误:Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element '<html lang="en" ng-app="app" class="ng-scope">'我有ng-app只设置一次(在_Layout.cshtml(ASP.NET MVC)中的html元素),我不使用angular.bootstrap所以提到here的问题不应该适用.如何调试问题(使用F12,Firebug,Chrome ……)?解决方法:使用以下过程: >下载未经授权的Angular源代码>切换脚本...

javascript – 添加动态元素时的AngularJS表单验证【代码】

我有一个AngularJS验证表单.问题是我使用Jquery向此表单添加输入元素,而AngularJS不会将这些元素添加到表单的验证中.这是一个例子:http://jsfiddle.net/ULEsy/var input = $compile($('<input type="text" ng-model="textinput" required />'))($scope); $("#someform").append(input);在示例中,即使输入字段无效(空 – 可以通过红色边框看到),整个表单也是有效的.有帮助吗?解决方法:@Ephi,我找到了解决这个问题的方法.显然,您需...

javascript – 带有ng-repeat的Angular JS指令无法遍历子元素【代码】

我正在使用AngularJS(我是新手)开发一个小解决方案,我正在尝试使用< dl>创建手风琴效果. &LT峰; dt&GT &LT峰; dd&GT标签.我已经定义了一个ng-repeat来从.json文件中创建dl中的dt和dd,它运行良好. 当我想通过指令添加一些功能时,我的问题出现了,所以我可以显示/隐藏< dd>单击< dt>的元素元件.我的指令代码看起来不起作用,因为它并没有真正做到我所期待的 – 它没有做任何事情 – .也许指令试图在ng-repeat完成它的过程之前添加功能?...

javascript – 在jasmine中模拟angular $元素【代码】

我需要在里面用$element测试一个指令控制器.所以我有一个像这样的功能:function func($event) {$element.find('#la-la-la').focus(); }并在测试中呈现它:template = $compile(element)($scope); $scope.$apply();controller = element.controller('myDirective');而我正在尝试做的是在该控制器内为该指令测试此函数.describe('func method', function testFunc() {it('should focus on element', function checkFocusing() {cont...

javascript – 删除然后通过angular指令添加元素打破输入[radio]上的ng-model【代码】

我创建了一个自定义指令来切换DOM中的元素.它类似于ng-show,但是使用实际的dom操作而不是通过样式隐藏.由于超出此问题范围的原因,我无法使用ng-show.angular.module('myApp').directive('daKeep', [function () {function link($scope, element, attributes) {var cacheElement, insertionElement;// the TRUTHY expression to watchvar expression = attributes.daKeep;function removeElement() {if (insertionElement === undef...

javascript – angularjs – mousedown&在鼠标按下事件时移动元素?【代码】

为了解释我想要做的事情,我创建了一个你可以玩的例子: http://plnkr.co/edit/usrmiNkj5YJY5SlV8ETw?p=preview 我想在鼠标停止时绘制多个绿色瓷砖.这个:<div ng-mousedown="drawImage($parent.$index,$index)"></div>仅当鼠标在不在外面的元素上向下时才有效. 有没有办法检查鼠标是否已经关闭并将图块拉成绿色? 请使用我创建的代码创建一个工作示例.解决方法:你必须包含一些事件处理程序,用于mouseup和mousemove,就像这样<div cl...

javascript – 如何使用angular js的$location.hash更改单击时html元素的颜色?【代码】

我有三个按钮,标记为关于我们,联系我们和服务.每当我点击一个按钮时,哈希值都会改变,我已经使用路由概念转到不同的页面. 现在,我想在AngularJS中使用函数$location.hash(),并在哈希值更改时更改按钮的颜色. 请参阅我在下面编写的代码:<div ng-controller="mainController"><a href = "#/aboutus" ng-class="{'active': location == '/aboutus'}">About us</a><a href = "#/contactus" ng-class="{'active': location == '/contact...

javascript – Angular.js获取ng-repeat中2d数组中最后一个元素的索引【代码】

我的控制器中有这个2d数组:1 2 6 1 2 7 9 2 1 5 3 2 6我需要向用户显示每行的最后一个元素(例如:6,9,2,6)我想我需要使用指令ng-repeat的某种组合或使用角度过滤器获取数组的$last索引. 这是我的,但不起作用:<div ng-repeat="row in array">{{row[$last].property}} </div>谢谢解决方法:示例:http://jsfiddle.net/TheSharpieOne/cLHcU/请注意,在较新版本的angular中,您必须注册控制器,而不是将其投放到全局窗口对象上.以下是使用...

javascript – 使用HTML5音频元素使用AngularJS创建新指令【代码】

我是角度新手,我使用angular指令制作了音频按钮:app.directive('soundButton', [function () {return {restrict: 'E',link: function (scope, element, attrs) {var audioSrc = attrs.origem;var audio = new Audio(audioSrc);scope.play = function () {if (audio.paused) {audio.play();} else {audio.pause();}};element.css({borderRadius: '50%',width: '100px',height: '100px', backgroundColor: 'red',display: 'inline-b...

javascript – AngularJS在ng-repeat中的当前迭代中定位元素【代码】

我确信这个问题已经以这种或那种形式多次回答,但是我不确定要搜索什么来找到解决方案. 假设我们有一个简单的ng-repeat:<div ng-repeat="item in items"><input type="text" value="{{item.name}}"><a ng-click="getTxtBoxVal(whatDoIPassInHere)">Get Text Box Value</a> </div>在javaScript文件中:function $scope.getTxtBoxVal(val) {alert(val)}基本上我想知道whatDoIPassInHere参数应该传递什么,在jquery中会是这样的:$(thi...