相关疑难解决方法(0)

AngularJS ngClass有条件

有没有办法让像ngClass这样的表达式成为条件.例如,我尝试了以下内容:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
Run Code Online (Sandbox Code Playgroud)

这段代码的问题在于,无论obj.value1是什么,类测试总是应用于元素.这样做:

<span ng-class="{test: obj.value2}">test</span>
Run Code Online (Sandbox Code Playgroud)

只要obj.value2不等于truthy值,该类就不应用.现在我可以通过这样做来解决第一个例子中的问题:

<span ng-class="{test: checkValue1()}">test</span>
Run Code Online (Sandbox Code Playgroud)

checkValue1函数如下所示:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}
Run Code Online (Sandbox Code Playgroud)

我只是想知道这是否是ngClass应该如何工作.我也在构建一个自定义指令,我想做类似的事情.但是我找不到观察表达的方法(也许这是不可能的,也就是为什么它会像这样工作).

这是一个显示我的意思的plnkr:

http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview

html css angularjs

487
推荐指数
11
解决办法
81万
查看次数

如何在AngularJS中有条件地应用CSS样式?

Q1.假设我想要在按下主"删除"按钮之前改变用户标记为删除的每个"项目"的外观.(这种直接的视觉反馈应该消除了对"你确定吗?"对话框的谚语的需要.)用户将检查复选框以指示应删除哪些项目.如果未选中复选框,则该项应恢复为正常状态.

应用或删除CSS样式的最佳方法是什么?

Q2.假设我想允许每个用户个性化我的网站的呈现方式.例如,从一组固定的字体大小中选择,允许用户可定义的前景色和背景色等.

应用用户选择/输入的CSS样式的最佳方法是什么?

css angularjs

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

在ngRepeat中第一个$

我有一个阵列$scope.items.

我想如果该项是添加css类$firstngRepeat之一in.

是否可以用角度来完成?一般来说,我如何处理Ajs中的布尔值?

<div ng-repeat="item in items">
   <div class='' > {{item.title}}</div>
</div>
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-ng-repeat

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

ng-class中的angularjs表达式语法是什么

所述AngularJS菜鸟手册有一些代码这减少类操纵以一个简单的表达和结合:

<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">
Run Code Online (Sandbox Code Playgroud)

但是,ng-class中的表达式语法是什么?我知道一个垂直条(|)将通过一个过滤器,并且一个过滤器可以在冒号后传递参数,但上面的代码正在做一些不同的事情.如果右侧的scope变量求值为true,则包含左侧的表达式,否则将其删除.

这是否特定于ng-class指令?http://docs.angularjs.org上有一些文档可以解释这个吗?

angularjs

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

angularjs if语句?

所以我正在浏览AngularJS的教程:

我在控制器中定义了一个数组,当我循环遍历ng-repeat {{feature.name}} {{feature.description}}时,我通过调用返回数组中的不同点

我不明白的是让我说数组中的第三个点叫做"重要性",它是一个从1到10的数字.我不想在html中显示那个数字,但我想做的是如果数组中的"重要性"数字是10对1,则为该要素应用不同的颜色

那么如何写一个if语句来做到这一点:

<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>
Run Code Online (Sandbox Code Playgroud)

不知道这是否正确,但这就是我想做的事情

if-statement angularjs

9
推荐指数
4
解决办法
3万
查看次数

根据结果​​表行颜色

我是AngularJs的新手我正在获取格式的json数据:

[
  {
    'StudentName':'abc',
    'maths':'0',
    'english':'0',
    'economics':'0',
  }
] 
Run Code Online (Sandbox Code Playgroud)

我想计算每个学生的分数,如果分数小于40%,那么表格行应该是红色,否则应该是绿色.我试过了.HTML

<div ng-app="MyApp" ng-controller="con1"> 
  <table id="table1">
    <tr>
      <th>student Name</th>
      <th>History Marks</th>
      <th>Maths Marks</th>
      <th>Economics Marks</th>
      <th>Percentage</th>
    </tr>
    <tr ng-repeat="x in data" ng-if="{{co(per(x))}}" ng-class="pass">
      <td>{{x.StudentName}}</td>
      <td>{{x.maths}}</td>
      <td>{{x.economics}}</td>
      <td>{{x.english}}</td>
      <td>{{per(x)}}%</td>
    </tr>
  </table>
Run Code Online (Sandbox Code Playgroud)

脚本

var app = angular.module('MyApp', []);
app.controller('con1', function ($scope, $http) {
    $http.get('/ajax/data').success(function (res) { $scope.data = res; });
    $scope.per = function (x) {
        avg = ((parseInt(x.maths) + parseInt(x.economics) + parseInt(x.english)) * 100) / 300;
        return avg;
    };
    $scope.co = function (x) …
Run Code Online (Sandbox Code Playgroud)

javascript jquery angularjs

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

在 AngularJS 中动态更改类

我正在开发这个项目,我想在其中合并这些图标。我对 AngularJS 很陌生,所以如果您能详细说明您的答案,我们将不胜感激。

我正在使用 OpenWeatherMap API,我想根据当前的天气描述显示适当的图标。对于未来的步骤,我想为所有不同的选项添加一个 switch 语句,但我什至无法使其与单个选项一起使用。

在 github 存储库中,它指出“图标是通过使用 i 元素并添加基类 wi 和您想要的图标类(例如 day-sunny)来显示的。这看起来像<i class="wi wi-day-sunny"></i>。”

应用程序.js

var classApp= angular.module('weatherApp', []);

classApp.controller('weatherCtrl', function($scope, $http){
  var vm = $scope;
  };



  $http.get("http://ip-api.com/json").success(function(data){
  vm.lat= data.lat;
  vm.lon=data.lon;
 var apiKey=  "key"; //removed key
 var openWeatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+ vm.lat + "&lon="+vm.lon+ "&appid=" +apiKey;

$http.get(openWeatherURL).success(function(data){

**vm.weatherClass= "wi wi-owm-731"; //USING THIS LINE FOR NOW**

// Hour between sunset and sunrise being night time
var night = false;
**vm.weatherClass2 =  $("#icon").attr("class", " wi …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs

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

将对象传递给模板并在当前视图上呈现它

有一个从api加载的用户列表

<div ng:controller="UserController">
    <li ng-repeat="user in users">
         <a ng:click="select(user)">
            {{user.first_name}} {{user.last_name}}
         </a>
    </li>
</div>
Run Code Online (Sandbox Code Playgroud)

单击用户时,我想打开一个额外的视图,显示用户的一些详细信息.想象一下这样的观点

在此输入图像描述

小蓝色区域是选定的用户,大蓝色区域是显示详细用户信息的容器.

function UserController($scope){
    $scope.select = function(user){
        console.log(user);
    }
}
Run Code Online (Sandbox Code Playgroud)

因此,当单击用户时,我可以记录用户对象.它一直有效.但我绝对不知道如何打开充满用户数据的额外容器.

有没有办法简单地从文件系统加载模板,传递对象并将整个事物附加到当前视图?我怎么用angular.js做这个?

angularjs angular-template

2
推荐指数
1
解决办法
6752
查看次数

条件类不适用于Bootstrap和Angular?

使用Bootstrap,Angularui-bootstrap我正在创建一组看起来像普通按钮的单选按钮(在这里使用plunker).

我现在想要将活动按钮设为蓝色(.btn-primary),其余为白色(btn-default).我找到了一些解答如何在这里有条件地应用课程的答案.我尝试像这样实现这种技术(Plunker在这里):

<div class="btn-group">
    <label class="btn" ng-class="{btn-primary: radioModel=='Left', btn-default: radioModel!='Left'}" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn" ng-class="{btn-primary: radioModel=='Middle', btn-default: radioModel!='Middle'}"ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn" ng-class="{btn-primary: radioModel=='Right', btn-default: radioModel!='Right'}"ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
Run Code Online (Sandbox Code Playgroud)

不幸的是它似乎不起作用.有谁知道如何实现活动按钮成为一个btn-primary和其他人是一个btn-default?欢迎所有提示!

javascript css twitter-bootstrap angularjs angular-ui-bootstrap

2
推荐指数
1
解决办法
1029
查看次数

当属性为真时聚合物添加类

我以前在 angular 中看到过这一点,并想知道这是否也适用于聚合物。Angular - 有条件地应用类的最佳方法是什么?

我已经设置了一个名为“动画”的属性:

animated: {
  type: Boolean,
  value: false,
},
Run Code Online (Sandbox Code Playgroud)

animation为 true 时,我元素中的 div 应该有一个.animate的 css 类。

<div class=""></div>
Run Code Online (Sandbox Code Playgroud)

现在我已经在 ready 函数中完成了。但是自从我遇到了 Stackoverflow 问题后,我想知道这在聚合物中是否可行。

谢谢!

polymer

2
推荐指数
1
解决办法
3449
查看次数