具有true/false问题的多个ng类
- ng-class是AngularJS中的一个指令，用于动态设置HTML元素的class属性。它可以根据表达式的值来添加或移除指定的class。ng-class的优势在于可以根据数据的变化动态改变元素的样式，提升用户体验。
- ng-bind是AngularJS中的一个指令，用于将数据绑定到HTML元素的内容中。它可以将表达式的值直接显示在页面上，而无需使用插值表达式{{}}。ng-bind的优势在于可以避免页面闪烁，提高性能。
- ng-model是AngularJS中的一个指令，用于实现双向数据绑定。它可以将表单元素的值与作用域中的变量进行绑定，当表单元素的值发生变化时，作用域中的变量也会相应更新。ng-model的优势在于简化了表单数据的处理，提高了开发效率。
- ng-repeat是AngularJS中的一个指令，用于循环遍历数组或对象，并生成相应的HTML元素。它可以根据数据的长度动态生成重复的元素，实现数据的展示和渲染。ng-repeat的优势在于简化了数据的展示逻辑，提高了代码的可读性。
- ng-show是AngularJS中的一个指令，用于根据表达式的值来显示或隐藏HTML元素。它可以根据条件动态控制元素的显示状态，提升用户体验。ng-show的优势在于可以根据数据的变化动态显示或隐藏元素，实现更灵活的页面交互。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/umeng
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Tencent Spatial Audio）：https://cloud.tencent.com/product/tencent-spatial-audio
相关·内容
你好，我面临的问题是使Li成为活动选项卡，我已经添加了悬停效果，但是如何添加活动选项卡？我用户的角度是ng显示和ng隐藏，以改变图标在李。这是我的密码
<li ng-mouseenter="show = true" ng-mouseleave="show = false" id="home">
<img src="images/home.png" ng-hide="show" class="whiteClass" />
<img src=
浏览 1提问于2014-07-03得票数 2
回答已采纳
我有一个div，其中包含了ng单击以重定向到另一个页面以显示详细信息，但是在这个div中我有一个按钮(如下)，当我单击该按钮时，我应该保持在同一个页面上。
<div class="panel-body" style="background-color: white;" ng-click="goToFacilitatorP(facilitator.username)">
<div class="col-md-2 col-xs-2">
<img class="img-thumbnai
浏览 4提问于2016-08-28得票数 0
回答已采纳
1回答
我在我的应用程序中有一个页面，其中包含一个多步表单。为了实现这一点，我在单独的选项卡中有3种形式。然后，js只允许您在on表单成功验证时继续执行下一步。
第一个表单工作得很好，我在第二个表单上也使用了相同的结构(如下所示)。
<div class="stepped-content" ng-show="steps[steps_index.yourDetails].active">
<form name="yourDetails" class="form-horizontal vs-onsubmit" ng-su
浏览 1提问于2015-02-03得票数 1
回答已采纳
我试着让ng重复从包含真理和错误的数组中传播一个列表。我怎样才能使谎言变成红色，让真理变成绿色呢？
这是我现在的代码：
$scope.profileCompare = {
You: {
name: "You",
questionAnswer: [false, true, false, false, false, false],
questionImportance: [false, true, false]
},
Pizza: {
浏览 5提问于2015-08-01得票数 0
回答已采纳
1回答
我有一个问题，找到为什么我得到一个额外的垫子-形式-字段-划线时，使用一个组件。
我的页面使用以下标记：
<mat-form-field class="col-md-6">
<app-mat-select-all
[data]="tractList$"
formControlName="tractList"
fieldName="name"
[multiselect]=true
浏览 16提问于2022-04-21得票数 1
回答已采纳
我希望有输入验证，以便如果用户点击href，他们应该看到“请填写此字段”，如果所需的输入文本没有填写。如果我把href改成button就行了，但这不是我要找的。
下面是我正在尝试做的事情：
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myform">
<input type="text" ng-model='name' ng-required="true" />
浏览 4提问于2018-07-27得票数 0
我已经创建了两个自定义指令- node和specialNode
<node data="currentNode" specialNodes="specialNodesArray"
ng-repeat="currentNode in nodesArray">
</node>
<specialNode ng-repeat="currentNode in specialNodesArray">
</specialNode&
浏览 3提问于2014-01-13得票数 3
我是Angular的新手，尝试使用ng类表达式应用类，但类不适用于li元素。我想在mouseover事件上突出显示li元素。
<ul class="list-group sortable" [sortablejs]="images" [sortablejsOptions]="clone1Options">
<li class="list-group-item" [ngClass]="{'active': selectedItem == item, 'highlight'
浏览 4提问于2018-07-25得票数 0
2回答
在我的角材料表中，有两个下拉表，它的OnChange方法给出了，YES/NO，的输出。现在，我想要的是，如果两个选定的索引都是NO，那么所选索引的颜色将被更改为RED。
下面是我的HTML：
<ng-container matColumnDef="Eligible To Vote?">
<mat-header-cell *matHeaderCellDef mat-sort-header> Eligible To Vote? </mat-header-cell>
<mat-cell *matCellDef=&#
浏览 0提问于2018-04-18得票数 0
指令html中的ng类切换：
ng-class="{true: "main.success", false: "main.error"}
全HTML
<body ng-app="myApp" ng-controller="MainCtrl as main">
<notification-msg></notification-msg>
<button ng-click="main.openAlert('success')">C
浏览 0提问于2015-02-15得票数 2
回答已采纳
1回答
引导转盘在最后一项后停止
、、、
我已经阅读了所有关于这方面的问题，但仍有一些问题发生在我身上。在我的html中，我使用了angular和carousel，我的问题是，在las项中，它不再循环。如果我点击左边的按钮而不是右边的按钮，它就会起作用。这是我的代码
<div id="filters-carousel" data-interval="false" class="container-fluid carousel slide issue-div-wrapper" data-ride="carousel">
<div class="
浏览 4提问于2016-04-12得票数 0
1回答
我使用了离子框架.I，用ng-做了一个简单的表演示，在这里，我为每一行做了交替的颜色，运行得很好，这里是我使用ng-重复的完美代码。
我用的是-重复
<ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight">
<div class="row" ng-repeat="column in inv | limitTo: counter track by $index" ng-class-odd="&
浏览 0提问于2015-06-12得票数 0
回答已采纳
1回答
不能用ngShow动画自定义指令
、、、、
我试图使用ng-show动画化一个定制的模式指令，遵循网站上显示的示例(示例位于页面的最底部)。然而，我没有任何运气让它发挥作用。
我用的是角1.3.x和引导带3.3.x。我不使用角UI引导，因为一个定制的模态指令是更灵活的我的需要。
到目前为止，我得到的是：
Modal.js：
angular.module('plunker', [])
.directive('myModal', function() {
return {
restrict: 'E',
transclude: true,
repl
浏览 1提问于2015-02-11得票数 2
回答已采纳
我只是注意到，在ng类中使用对象时，某些东西在角度上不起作用(或者不像我预期的那样起作用)。
我还能指望什么？
在更改对象中属性的名称时，类应该相应地更新.。
我试过什么？
我发现，当我使用对象样式注释(如ng-class="{obj.prop: testExpression}" obj.prop 和obj.prop)时，ng类中的值会发生变化，但类属性中的值不会发生变化。
不同之处在于这种方法不起作用：
<tr ng-repeat="user in users" ng-class="{ {{user.genre}}: true}">
浏览 0提问于2015-01-21得票数 0
回答已采纳
2回答
如果选中了li，我希望突出显示该radio。在ng-repeat内部，ng-class true条件正在工作，但false条件不工作，请检查下面的代码
<div ng-init="friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
浏览 4提问于2014-08-18得票数 1
回答已采纳
我有一个Person对象数组
var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];
我使用select和ng选项，如下所示：
<select ng-model="Blah" ng-options="pers
浏览 1提问于2013-03-07得票数 41
回答已采纳
当输入字段有焦点或下拉组件获得焦点或单击时，我希望向容器添加一个类。在脱离焦点时，类必须被移除。
当输入字段或dropdownComponent有焦点或被单击时，输入容器必须获得类“活动”。对于输入字段，我添加了ng焦点和ng模糊，这是可行的。
但是ng-focus和ng-blur不适用于包含的组件。我将组件包装在div容器中，但这次ng-blur没有工作。
守则：
<div class="input-container" ng-class="{'active': focus}">
<dropdownComponent
浏览 0提问于2019-11-17得票数 0
回答已采纳
我有过
<parentdiv class="a">
<child1 class="b"></child1>
<child2 class="b"></child2>
<child3 class="b"></child3>
</parentdiv>
使用css，我可以在每个单独的子div上应用B类中已经存在的不同的背景图像属性(我将固定不。)，谢谢
<mat-horizontal-stepper _ngcontent-c1
浏览 0提问于2017-11-18得票数 0
回答已采纳
1回答
给出每一个角度材料复选框和ID
、、、、
我目前有一个问题：
我需要从数据库创建md-checkboxes。这个部分在ng-repeat中很好地工作。但是我在阅读那些复选框时遇到了问题。数据库中的每个条目都有自己的唯一ID (我使用的是RethinkDB)，所以我认为我可以将它作为ID应用。
md-card(ng-repeat="n in ideas")
md-card-content
span
md-checkbox(type="checkbox" id='n.id') {{n.idea}}
我使用Jade / Pug作为查看引擎。但是现在我怎么能同时读出所有的复选框呢？我尝试过许多方
浏览 5提问于2017-01-23得票数 0
2回答
玩角2，并试图使这个简单的代码工作。然而，我不断地发现一个错误：
异常:无法解析Tab的所有参数(未定义)。确保它们都有有效的类型或注释。
到目前为止，ng2并没有将constructor(tabs:Tabs) {…注入构造函数中。
以下是整个代码：
///<reference path="../../typings/zone.js/zone.js.d.ts"/>
import {Component, Input} from 'angular2/core';
@Component({
selector: 'tab'
浏览 3提问于2015-12-16得票数 2
今天我遇到了一个问题，这对我来说听起来很奇怪，但肯定有一些合理的解释……
我正在构建一个表，允许在其中内联编辑字段值。例如，您会看到一个带有标题的span，然后如果您单击它，将出现内联编辑。
这是ng-repeat的包装器。
<div ng-repeat="product in products" ng-controller="ProductController">
</div>
如您所见，每次迭代都会创建新的ProductController实例。产品控制器触发一些事件，并相应地捕获它们。
myApp.controller('P
浏览 2提问于2013-09-25得票数 1
3回答
我在一本书中介绍了下面的ng-class=“表达式”示例。
ng-class="{error:isError,warning:isWarning}"
我得到控制器的逻辑，但我的怀疑是在这里发生的插值。
下面的场景意味着什么(计算值是什么)和为什么是
ng-class="{error:true，警告:true}“
ng-class="{error:true，警告:false}“
ng-class="{error:false，警告:true}“
ng-class="{error:false，警告:false}“
浏览 7提问于2014-10-25得票数 0
1回答
我正在尝试在我的应用程序中的ng类中设置多个条件。我有一件事
<div id='wrapper' ng-class="{red: !isBlue(),
highlight ? 'yellow' : 'black'}"
ng-show="test">Test</div>
JS
$scope.highlight = false;
我的问题是，我在ng类条件下有语法错误。
Syntax Error: Token ';&
浏览 1提问于2014-12-12得票数 0
回答已采纳
代码：
<div class="input-dropdown-wrapper d-flex space-between vertical-center margin-right-12"
ng-class="{'active': historyController.showFilterHistoryDurationDropdown === true}"
ng-click="historyController.showFi
浏览 0提问于2018-06-19得票数 0
回答已采纳
1回答
尝试创建一个显示文本框或下拉列表的简单指令，具体取决于是否为作用域中的model属性传递数组。
除了在指令标记中显式设置false之外，任何东西(例如，multiple="false" )都会导致多选择下拉列表。
为什么这不管用？另外，md-select值绑定不起作用(尽管textbox绑定有效)，我怀疑是出于同样的原因。
Consumer
<div ng-app='home' layout-padding layout="row">
<content-filter ng-repeat="filter in fil
浏览 5提问于2016-08-27得票数 1
回答已采纳
我被卡住了。弄不清楚这个。这个问题很简单，但我真的不确定如何将它作为一个问题来表达，因此我将尽我所能。
首先，这是我整个应用的布局(问题出在Header.jsp上)：
<jsp:include page="../home/Header.jsp" />
<jsp:include page="../home/Modals.jsp" />
<div data-ng-view data-save-scroll-position data-position-relative-to-menu></div>
<jsp:in
浏览 2提问于2018-12-01得票数 2
我在使用ng-repeat来显示3列表时遇到了一些问题。Firsr列表是可以的，因为google地图显示在第二列表和第三列表中。这是我的html
<ion-list>
<ion-item class="animate-repeat" ng-repeat="i in rep">
<div class="card card-wraper" >
<div class="item item-text-wrap&
浏览 1提问于2017-05-25得票数 0
尝试在angularjs中选择与对象值相关的多个选项
下面是一个代码：
myapp.controller('myctrl', [
'$scope',
function ($scope) {
$scope.query = {
Statuses: {
Draft: true,
Live: true,
Pending: true,
浏览 6提问于2012-11-20得票数 12
回答已采纳
1回答
请看一下这个。
<input type="radio" name="op_0" ng-value="true" ng-model="n1"> True
<input type="radio" name="op_0" ng-value="false" ng-model="n2"> False
<input type="radio" name="op_0" ng-value="true" ng
浏览 1提问于2015-09-25得票数 2
Angular的允许您将上下文传递给outlet以进行属性绑定。
<ng-container *ngTemplateOutlet="eng; context: {$implicit: 'World'}"></ng-container>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
Angular的*ngIf允许您根据布尔条件嵌入一个或另一个模板：
<ng-container *ngIf=
浏览 5提问于2018-02-15得票数 19
回答已采纳
我正在跟踪来自的文档。这是我按照建议创建的指令。
.directive('setFocusIf', function() {
return {
link: function($scope, $element, $attr) {
$scope.$watch($attr.setFocusIf, function(value) {
if (value) { $element[0].focus(); }
});
}
};
});
我的标记是：
<input set-focus-if="hasFocus"
浏览 4提问于2015-07-10得票数 1
我试图使用ng-class切换元素的类
<button class="btn">
<i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>
isAutoScroll()：
$scope.isAutoScroll = function()
{
$scope.autoScroll = ($scope.autoScroll) ? false :
浏览 2提问于2013-03-13得票数 221
回答已采纳
1回答
我在angularjs中使用jquery数据选择器，它运行良好。但是当数据报警器出现在ng-repeat循环中时，它就不能工作了。
<input type="text" class="form-control date_picker" ng-model="date.date" ng-repeat="date in ot.dates">
//Directive
app.directive('otForm', function () {
return {
restrict: '
浏览 5提问于2015-08-04得票数 0
回答已采纳
3回答
我对纳-重复和纳科有个问题。只有当param "sel“为true时，我才想应用类。我的数据是这样的：people = [{"id":0,"name":"Simone","sel":true},{"id":1,"name":"Maria","sel":false},{"id":2,"name":"Marco","sel":false}]
在我的html页面中：
<li ng-repeat=&
浏览 1提问于2015-02-19得票数 4
回答已采纳
1回答
我有一个小问题: ng-click工作如果我只是双击oO我不明白，有什么问题吗？
这是我的控制器
function MapCtrl($scope) {
if(navigator.onLine){
$scope.online = true;
} else {
$scope.offline = true;
}
/* text */
$scope.reloadText = "Reload";
$scope.reloadingText = "Reload in progress";
浏览 0提问于2014-04-11得票数 0
1回答
首先，所有的复选框都被选中。然后我只需检查其中的2个，然后按下搜索。
复选框和搜索按钮：
<input type="checkbox" id="stat2" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check2" />
<label for="stat2">Status 2</label>
<br />
<input ty
浏览 0提问于2018-02-19得票数 0
我正在使用ng-map指令，并将自动完成API放在我的angularjs应用程序中。它们工作得很好。但问题是，我既需要在引导模式中使用，也需要在引导模式中使用相同的代码时，ng-map和place autocomplete都不起作用。如果我遗漏了什么，请给我建议。只有当我使用angular的ng-map指令时才会出现问题。使用javascript，一切都很好，但我不想写大量代码。我只想使用ng-map。这是我的标记
<ng-map zoom="8">
<marker visible="true" centered="true"
浏览 0提问于2016-04-07得票数 1
1回答
在物化中重叠的预填充内容
、、、、
我想做的是填写一个使用物化的表单，但它正在发生的是书面内容只是重叠输入的占位符，而不是实际从页面“收到”。我使用的JS代码如下：
$("label[for='firstname']").addClass("active");
document.getElementById("firstname").value = "John";
因为在web上，我注意到许多用户修复了这个问题，将类“活动”添加到输入的标签中，但这对我不起作用。
同时，当尝试使用
$(document).ready(function() {
M
浏览 2提问于2016-10-30得票数 3
1回答
有多个面板和子面板(DIVs)，我需要显示它的(面板)控件点击来执行特定的任务。该项目是具有前端编辑功能的cv生成器。所以在显示/隐藏面板方面，我的方法是非常基本的，所以希望有更好的方法来完成这个任务。
这里是HTML标记
<div class="panel component-about" ng-class="{'active': aboutPanel}" ng-click="activePanelAbout()">
<h2 class="title">Some Title (inpu
浏览 0提问于2018-03-27得票数 0
2回答
当用户登录时，如何使用ng-class将Css类添加到放置display: none;的位置？我使用的是mean.js，所以我首先尝试使用
ng-show="authentication.user"
但这只会让元素像visivility : hidden;一样隐藏起来
此外，我需要在我保留的元素中添加其他类，而不是在我更改边距和其他内容的地方登录用户。
我尝试在angular中使用一个条件：
$scope.logged = false;
if ($scope.authentication.user) {
$scope.logged = true;
}
然后像这样
浏览 25提问于2017-03-16得票数 0
2回答
我有一个具有错误信息的角度UI日期选择器，当日期无效时会显示错误消息。问题是错误消息显示在日期下面，而不是同一行。怎么解决这个问题？
HTML
<form name="form1" ng-submit="validate(form1)" novalidate>
<p class="input-group" style="width:160px;margin-bottom:0px;">
<input type="text" class="for
浏览 1提问于2017-05-01得票数 0
回答已采纳
我有一个具有重复I的对象字典，如下所示：
var groups = {"0": "attributes":[{"id":2, "name":"abc"},
{"id":5, "name":"xyz"}],
"1": "attributes":[{"id":2, "name":"abc"}]}
我想将这个
浏览 0提问于2015-08-09得票数 0
我有一些数据来自一个资源，看起来如下：
$scope.phones = [
{
Value: <some value>,
IsDefault: true
},
{
Value: <some value>
IsDefault: false
}
];
为了简单起见，这里是中继器：
<div ng-repeat="phone in phones">
<input type="radio" name="phone
浏览 2提问于2014-05-22得票数 0
回答已采纳
我有这样的用户模式，当用户注册时，我希望将默认值设置为null，但也可以将此值设置为unique。我尝试了这个的解决方案，我真的复制了相同的解决方案，但是我仍然得到这个错误MongoError: E11000 duplicate key error index: ppp-ng-dev.users.$mobile_1 dup key: { : null }。
我的图式
const userSchema = new Schema({
mobile: {
type: Number,
required: false,
index: {
浏览 0提问于2019-04-10得票数 1
回答已采纳
我在ng-repeat循环中有一些元素，这些元素具有以下属性：
<div ng-repeat="h in myObjectArray">
<div>
<input ng-class="{ clicked: clickedFlag1 }" ng-focus="clickedFlag1 = true" ng-blur="clickedFlag1 = false" type="button" id="1" value="1" ng-cl
浏览 4提问于2016-07-25得票数 1
回答已采纳
2回答
我有一个UI元素，它是一个错误消息，它将在错误消息未显示时显示出来：
<section id="errorPanel" class="alert alert-danger alert-top ng-hide" data-ng-show="validationData.serverError">
Unknown server error occurred. Please try again.
</section>
在显示错误消息时，就像这样：
<section id="errorPanel" c
浏览 0提问于2018-08-23得票数 0
回答已采纳
1回答
下面的代码不会更改表的任何颜色。行上没有看到红色或绿色(除非正确呈现不同的标签)。
有什么想法吗？
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Player</th>
<th>Number</th>
<th>Still standing?</th>
</tr>
浏览 0提问于2015-10-20得票数 0
回答已采纳
1回答
这与的问题有关。我想要做完全相同的，但使用一个ng-选择，使多个项目可以被选中。
以下是我的ng-select代码：
<label class="col-sm-4 text-sm-right col-form-label">Payout Format</label>
<div class="col-sm-8">
<ng-select
[items]="payoutFormats"
浏览 0提问于2019-06-07得票数 1
回答已采纳
<div style="float:left" data-ng-repeat="x in tokens" ng-init="btnclass=false">
<button type="button" ng-class="{true:'btn btn-material-light-green btn-sm', false:'btn btn-material-grey btn-sm'}[btnclass]" ng-click="
浏览 7提问于2015-04-10得票数 1
回答已采纳
使用角1.5.3，是否有可能在全局禁用ng动画，然后在某些元素上选择性地启用它？
我有一个指令(ng-animate-enabled)，用于在容器div和它的子容器上启用ng动画。
如果我通过$animate.enabled(false)全局禁用控制器中的ng动画，则动画不再工作，即使我通过上面提到的指令专门启用了它们。
这个说明了这个问题。
谢谢!
浏览 4提问于2016-05-23得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
