标签: ng-show

Animate.css和Angularjs ng-hide

我正在学习和试验Angularjs和animate.css.当ng-show为true或false时,我试图添加动画.显示和隐藏的作品,但不是动画.希望有人在这里可以告诉我我做错了什么.

这是插件.

谢谢您的帮助.

angularjs animate.css ng-animate ng-show ng-hide

8
推荐指数
1
解决办法
1万
查看次数

如果输入元素未隐藏,则为其设置必需属性

我正在使用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

8
推荐指数
1
解决办法
8807
查看次数

Angularjs ng-show指令将'N'和'NO'解释为假值

似乎Angularjs ng-show指令将'N'和'NO'解释为假值.

在我的角度应用程序中,我使用以下内容显示与特定国家/地区相关的数据 <div ng-show="countryCode">some code</div> 当我发现未显示与挪威相关的数据时,我感到很惊讶.这是因为挪威的国家代码是"NO",被认为是假值!

我不知道这是否是一个设计选择.但如果是,你如何处理这类问题

你可以在这里重现这一点

先感谢您

angularjs ng-show

6
推荐指数
1
解决办法
794
查看次数

使用angular来隐藏内部循环中的整个div?

<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?提前致谢!

javascript jquery angularjs ng-repeat ng-show

6
推荐指数
1
解决办法
614
查看次数

如何减少AngularJS中的观察者以获得具有相同条件的ng-show

在我的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.它会影响性能.在这种情况下,有没有办法减少观察者的数量?

performance angularjs ng-show

6
推荐指数
1
解决办法
2207
查看次数

为什么插值在ng-show内部工作,而不是在ng-click内部

//模板

      <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()}}开始.

expression string-interpolation angularjs ng-show

6
推荐指数
1
解决办法
627
查看次数

使用IONIC中的ng-show进行幻灯片切换

这是codepen http://codepen.io/lakhan/pen/cukyL

我有一个带有ng-repeat的项目列表,我一次显示一个项目.单击下一步显示列表中的下一个项目.现在,当我点击下一个时,我想要实现的是项目上的幻灯片转换.我方缺少CSS方面的东西.任何帮助将不胜感激.

css3 angularjs ng-show ionic-framework

5
推荐指数
2
解决办法
2万
查看次数

角度范围和ng-click/ng-show设置多个div

我正在寻找一些我迄今为止的代码的帮助.

主要目标是能够点击任何加号图标并让它覆盖所有其他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使用?

如何正确连接此示例的范围?

非常感谢.

我在这里设立了一个有效的FIDDLE.

在此输入图像描述

是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

5
推荐指数
1
解决办法
1871
查看次数

使用ng-if开始隐藏元素(防止在页面加载期间显示)

当我想创建隐藏的东西时ng-show你可以添加,class="ng-hide"所以css会预先隐藏元素.这样,当页面仍在加载时,不会显示元素

我想做同样的事情,ng-if但我不知道该怎么做

angularjs ng-show angular-ng-if angular-directive

5
推荐指数
1
解决办法
2636
查看次数

如何在AngularJS中使用ng-repeat创建嵌套结构

使用ng-repeat,AngularJS循环问题

我在使用角度js(离子1 app)中的ng-repeat创建这个循环结构时遇到了麻烦.当我使用ng-repeat时,日期会在每个循环中重复显示每个事件.但我想只为相应的事件显示一次日期,如图所示.

图片

angularjs angularjs-ng-repeat ng-show ionic-v1

4
推荐指数
1
解决办法
87
查看次数