我正在学习和试验Angularjs和animate.css.当ng-show为true或false时,我试图添加动画.显示和隐藏的作品,但不是动画.希望有人在这里可以告诉我我做错了什么.
这是插件.
谢谢您的帮助.
我正在使用angular.js处理动态表单.输入字段
<div ng-show="condition()">
<input type="text" name="field" required>
</div>
Run Code Online (Sandbox Code Playgroud)
如果condition()返回false,则不会显示输入字段.但是通过点击提交按钮,我将获得chrome,消息:
An invalid form control with name='field' is not focusable.
Run Code Online (Sandbox Code Playgroud)
嗯,一个解决方案是,使用ng-required:
<div ng-show="condition()">
<input type="text" name="field" ng-required="condition()">
</div>
Run Code Online (Sandbox Code Playgroud)
好吧,这里我必须重复使用条件()几次代码.
当你可以封装ng-show时,它变得很糟糕:
<div ng-show="condition1()">
<div ng-show="condition2()">
<input type="text" name="field"
ng-required="condition1() && condition2()">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
有没有更好的方法,当输入可见时,所需的标签应该在那里,而不是,如果它是隐藏的.
似乎Angularjs ng-show指令将'N'和'NO'解释为假值.
在我的角度应用程序中,我使用以下内容显示与特定国家/地区相关的数据
<div ng-show="countryCode">some code</div>
当我发现未显示与挪威相关的数据时,我感到很惊讶.这是因为挪威的国家代码是"NO",被认为是假值!
我不知道这是否是一个设计选择.但如果是,你如何处理这类问题
先感谢您
<div id="whole-div" ng-hide="hideme">
<div id="loop-div" ng-repeat="i in [1, 2, 3]">
<button ng-click="hideme=true">Button {{i}}</button>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
以上是我现在的代码.我想要它,这样当你点击循环中的一个按钮(Button1,Button2,Button3)时,整个div都被隐藏了.但是,我发现当按钮在外面时,我只能隐藏整个div,如下所示......
<div id="whole-div" ng-hide="hideme">
<div id="loop-div" ng-repeat="i in [1, 2, 3]">
<button>Button {{i}}</button> </div>
<button ng-click="hideme=true">Final Button</button>
</div>
Run Code Online (Sandbox Code Playgroud)
有没有办法使用循环div中的一个内部按钮隐藏整个div?提前致谢!
在我的HTML代码中,有些div
将以相同的条件显示.我ng-show
为每个人设定了这个条件div
.
<div ng-show="sameCondition1">...data1...</div>
...something else...
<div ng-show="sameCondition1">...data2...</div>
...something else...
<div ng-show="sameCondition1">...data3...</div>
Run Code Online (Sandbox Code Playgroud)
AngularJS将为每个人创建3个观察者ng-show
.它会影响性能.在这种情况下,有没有办法减少观察者的数量?
//模板
<div ng-controller="myController">
<input type="text" ng-model="name">
<p>{{name}}</p>
<p>{{10+10}}</p>
<button type="button" ng-click="{{myFunction()}}">click Me !!</button>
<p ng-show="{{myFunction()}}">The name is {{ name | uppercase }}</p>
</div>
// Controller
myApp.controller('myController', function ($scope) {
$scope.name = 'Ranka';
$scope.myFunction = function(){
return true;
};
});
Run Code Online (Sandbox Code Playgroud)
在ng-click的情况下失败了
angular.js:14525错误:[$ parse:syntax]语法错误:表达式[{{myFunction()}}的第2列的令牌'{'无效键,从[{myFunction()}}开始.
这是codepen http://codepen.io/lakhan/pen/cukyL
我有一个带有ng-repeat的项目列表,我一次显示一个项目.单击下一步显示列表中的下一个项目.现在,当我点击下一个时,我想要实现的是项目上的幻灯片转换.我方缺少CSS方面的东西.任何帮助将不胜感激.
我正在寻找一些我迄今为止的代码的帮助.
主要目标是能够点击任何加号图标并让它覆盖所有其他div块.
当点击加号图标时,它也会在右侧显示一个div块.
正如您将看到单击块2时所做的那样.
当点击任何加号图标时,我正在寻找一种有效的方法来使用Angular.
这只是我在这里展示的一个小样本,实际上可以覆盖10到20个块.
如果有人能够在这里看到使用更少代码的方法并更好地利用范围,那将非常感激.
试过这个,但它不想工作......
data-ng-class="{coverThisBlock: value2 == 'off',coverThisBlock: value == 'on'}"
Run Code Online (Sandbox Code Playgroud)
如果我不得不使用这种类型的选项,甚至说10块,那将是一个真正的混乱.
主要问题
是否有更好的Angular方式可以使用...当点击任何加号图标时,它会更改范围,然后由ngclass和ng-show使用?
如何正确连接此示例的范围?
非常感谢.
这是Avijit Gupta的最终工作示例.
<div class="container" ng-app="plusMinusApp" ng-controller="plusMinusController">
<div class="row" ng-init="value1 = 'off'">
<!--<div class="col-xs-4" data-ng-class="{coverThisBlock: value2 == 'off',coverThisBlock: value == 'on'}"> -->
<div class="col-sm-4 col-xs-6" data-ng-class="{coverThisBlock: value2 == 'off'}">
<div class="divClass"
data-ng-click="(selectBlock(1)) ; (status1 = !status1) ; (value1 = { 'on': 'off', 'off':'on'}[value1])"
data-ng-class="{'active-selection': …
Run Code Online (Sandbox Code Playgroud) angularjs angularjs-scope angularjs-ng-click ng-show ng-class
当我想创建隐藏的东西时ng-show
你可以添加,class="ng-hide"
所以css会预先隐藏元素.这样,当页面仍在加载时,不会显示元素
我想做同样的事情,ng-if
但我不知道该怎么做
我在使用角度js(离子1 app)中的ng-repeat创建这个循环结构时遇到了麻烦.当我使用ng-repeat时,日期会在每个循环中重复显示每个事件.但我想只为相应的事件显示一次日期,如图所示.
angularjs ×10
ng-show ×10
animate.css ×1
css3 ×1
expression ×1
ionic-v1 ×1
javascript ×1
jquery ×1
ng-animate ×1
ng-class ×1
ng-hide ×1
ng-repeat ×1
performance ×1