有没有办法让像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:
Q1.假设我想要在按下主"删除"按钮之前改变用户标记为删除的每个"项目"的外观.(这种直接的视觉反馈应该消除了对"你确定吗?"对话框的谚语的需要.)用户将检查复选框以指示应删除哪些项目.如果未选中复选框,则该项应恢复为正常状态.
应用或删除CSS样式的最佳方法是什么?
Q2.假设我想允许每个用户个性化我的网站的呈现方式.例如,从一组固定的字体大小中选择,允许用户可定义的前景色和背景色等.
应用用户选择/输入的CSS样式的最佳方法是什么?
我有一个阵列$scope.items.
我想如果该项是添加css类$first的ngRepeat之一in.
是否可以用角度来完成?一般来说,我如何处理Ajs中的布尔值?
<div ng-repeat="item in items">
<div class='' > {{item.title}}</div>
</div>
Run Code Online (Sandbox Code Playgroud) 所述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的教程:
我在控制器中定义了一个数组,当我循环遍历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)
不知道这是否正确,但这就是我想做的事情
我是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) 我正在开发这个项目,我想在其中合并这些图标。我对 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) 有一个从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做这个?
使用Bootstrap,Angular和ui-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
我以前在 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 问题后,我想知道这在聚合物中是否可行。
谢谢!