【AngularJS改变元素显示状态】教程文章相关的互联网学习教程文章

javascript-子元素上的AngularJS动画第一次运行,第二次失败【代码】

我在这里遇到角度动画的怪异问题.我正在制作一个动画,该动画在屏幕之间转换并根据屏幕的“深度”更改方向. 棘手的部分是有两个部分,一个是静态的,另一个是移动的,这就是为什么我要像这样实现它.您会看到第一次工作正常,而第二次工作无效. ng-enter转换效果不好. 在这里您可以看到塞子: http://plnkr.co/edit/OC4rqA?p=info解决方法:我已经解决了这个问题,并且怀疑该问题与在$routeChangeStart中设置ltr和rtl类有关.看来ngView动画...

javascript-为什么angular2表单不能正确使用html元素?【代码】

我注意到< form>的某些奇怪行为. ng2中的元素,我需要有人向我解释一下:) 我创建了简单的Plunker示例https://plnkr.co/edit/vdrHJBNdd26y6YhPXTHD?p=preview 因此,现在是工作的罚款.如果你输入一些值,然后单击“添加参数”,输入值将在模型进行更新,并保存到输入字段. 但是,如果用< form>包裹< div&gt ;,像这样的元素https://plnkr.co/edit/vdrHJBNdd26y6YhPXTHD?p=preview和输入不便到现场,然后再次单击“添加参数”,表格将被刷新,你...

javascript-AngularJS:如何将ng-keydown添加到ng-repeat的第一个和最后一个元素?【代码】

我想将ng-keydown添加到ng-repeat的第一个和最后一个元素中.我该怎么办?解决方法:只需将$first和$last与ng-if结合使用这里的例子:<ul ng-repeat="n in data"><li ng-if="!$first && !$last">{{n.Name}}</li><li ng-if="$first" ng-keydown="something">{{n.Name}} | first element</li><li ng-if="$last" ng-keydown="something">{{n.Name}} | last element</li> </ul>塞子:http://next.plnkr.co/edit/7ptMyWG6lGzvp9jl 更多:...

javascript-如何编写无需使用ng-transclude即可替换dom元素的angularjs指令?【代码】

我希望写一条指令,从根本上改变这一点:<g:text>Hello There</g:text>to<svg class="gx-text"><text>Hello There</text></svg>因此在dom中,< g:text>元素已完全被< svg>元件 我不想使用ng-transclude,因为我发现它在dom中添加了许多其他元素.解决方法: var app = angular.module('app', []); app.directive('gText', function() {return {restrict: 'E',compile: function(tElement, attrs) {tElement.replaceWith('<svg class="g...

javascript-有两个共享相同DOM元素的Angular控制器是一种不好的做法?【代码】

想象一下,我有这样的事情:<html ng-app="myApp">...<body ng-controller="GlobalController"><div id="one">...</div>...<div ng-controller="SpecificController" id="subPart"><div id="two">...</div>...</div>...</body> </html>如您所见,控制器GlobalController管理整个主体,而SpecificController仅控制子零件. 在这种情况下,div#one可以访问GlobalController,但是div#two链接到GlobalController和SpecificController. 我的问...

javascript-AngularJS仅在ng-repeat中显示最后一个元素【代码】

使用flexslider渲染一堆画廊时,我有一个奇怪的行为.如下所示,我有一个包含多个对象的数组,这些对象构成了一个图像数组.当我“渲染”画廊时,所有画廊都会出现,但只有最后一个画廊会显示其图像.在所有画廊上,该特定图像数量的指示符以及标题和链接均正确,但是图像丢失. 我在这里做错事了吗?这是我的代码:$scope.galleries = [{title: 'gallery1', 'link': 'http://...', elements: ['img/img1.jpg','img/img2.jpg']},{title: 'gall...

javascript-如何将angularjs变量值分配给html元素属性,例如输入elememnt的name属性【代码】

我对angular完全陌生,我有一个angularjs $scope变量:$scope.testme = "inputname",我想将此变量值分配给html元素的名称属性.我想要 以下结果: <输入名称=“输入名称” ...>.但是如何从angularjs作用域变量获取它呢? 谢谢!解决方法:请查看更多https://docs.angularjs.org/guide/databindingvar app= angular.module("app",[]).controller('fCtrl', function($scope){$scope.elementName = "testName"; $scope.myElement = {valu...

javascript-从元素动态释放ng-click:angularjs【代码】

我有一个具有ng-click事件的元素,单击它会添加一个工作正常的div.我想要的是在添加div后删除ng-click. 一种方法是使用ng-if<div ng-click="addDiv()" ng-if="!divAdded" > <span>i add a div</span> </div><div class="disabled" ng-if="divAdded" > <span>i add a div</span> </div>为此,我必须为打开和关闭的单个元素添加多个div.有没有办法像我们在jquery中那样动态地取消绑定点击事件? 任...

javascript-Angularjs通过验证更改同一元素上的指令内的ng-model【代码】

在最原始的角度应用程序中,我试图为输入字段创建指令,该指令会更改父对象的ng-model值. HTML:<form novalidate><input ng-model="ctrl.myvalue" mydirective minlength="19" />{{ ctrl.myvalue }} </form>JS:var app = angular.module('app', []);app.directive('mydirective', function(){return {scope: { ngModel: '=' },link: function(scope, el) {el.on('input', function(e) {this.value = this.value.replace(/ /g,'');s...

Javascript-angular js从范围div和span元素中选择所有文本,以便用户复制所选文本【代码】

我正在尝试创建一些文本的全选功能(以角度js表示),其显示格式类似于以下结构.选择所有文本后,用户可以按ctrl c复制该文本.<div ="container"><div class="header">My example header</div><div class="section1"><span>test content1</span><span>test content2</span></div><div class="section2"><span>test content3</span><span>test content4</span></div><div class="footer">footer content</div> </div>将有一个按钮,通过单...

javascript-在Angular指令中获取父元素【代码】

我尝试在单击日期选择器日历上的按钮时查找父tr元素.由于我不想在Angular应用程序中以脚本标签(编辑)的形式使用jQuery,并且严格使用CSS不可能做到这一点,因此我在下面创建了指令. elm.find能够正确找到和更改按钮的css,所以我知道我已经找到了所需的元素,但是现在我需要向上移动DOM. 我已经习惯了jQuery语法,但是这种语法不起作用,而且我还没有找到任何有效的工具.有机会有人帮我解决语法问题吗?/* Linker for the directive */va...

javascript-Angular 2-将组件动态创建/注入到* ngFor循环内的特定元素【代码】

我正在遍历一系列指标,并且在每个循环中都有一个按钮,可以单击该按钮以在循环HTML内的特定div处呈现图形.该图是一个单独的组件,但是我似乎无法弄清楚如何将正确的HTML元素定位到该图组件中.我首先创建了一个组件渲染函数,然后这样调用它:loadMetricGraph(metric) {let selector = "[id=metricGraph-" + metric.id + "]";this.renderComponent(LineGraphHorizontalComponent, selector, metric.data); } renderComponent(compon...

javascript-如何仅在单击的元素中定位Angular中的3个或更多类之间交换?【代码】

我希望元素在单击时在3个CSS类之间交换.我已经看到了只有2个类切换为like this one时才能使用的其他解决方案.这些解决方案基于正确和错误的条件,因此它不适用于2个以上的类. 我让它在3个类之间交换,但是,单击以所有元素为目标,而不是单击单个元素. Here’s my code so far:$scope.iconClass = "green";$scope.iconClicked = function () {switch ($scope.iconClass) {case "green":$scope.iconClass = "red";break;case "red":$sc...

javascript-单击链接后滚动到其他模板上的特定元素(Angularjs)【代码】

嗨,我对Angular来说还很陌生. 用户可以在profileSettings页面中编辑配置文件设置. 我的个人资料模板上有以下内容:<div>{{ user.name }}</div> <a class="pull-right" ui-sref="profileSettings"><strong>Edit Name</strong></a> ...more code... <div>{{ user.description }}</div> <a class="pull-right" ui-sref="profileSettings"><strong>Edit Description</strong></a>我希望他们能够单击将他们带到Settingsprofile模板的编辑...

javascript-AngularJS 1.2.0-rc.2与1.2.0元素绑定【代码】

我最近将AngularJS框架从1.2.0-rc.2升级到了1.2.0版本,遇到了一个奇怪的问题,我还没有找到解决方法.我之前解决的问题是强制输入字段在on-blur事件而不是on-change事件上触发.我最初使用的指令的代码是:angular.module('app', []).directive('ngModelOnblur', function() {return {restrict: 'A',require: 'ngModel',link: function(scope, elm, attr, ngModelCtrl) {if (attr.type === 'radio' || attr.type === 'checkbox') retu...