有条件申请课程的最佳方法是什么？

css CSS

古一西里

2020-03-13

假设您有一个呈现为的数组，ul其中li每个元素都有一个，控制器上的属性为selectedIndex。li用selectedIndexAngularJS中的索引向中添加类的最佳方法是什么？

我目前正在复制（手工）li代码并将类添加到li标签之一中，并使用ng-show和ng-hide仅显示li每个索引一个。

第1557篇《有条件申请课程的最佳方法是什么？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
Green斯丁 2020.03.13

检查 http://www.codinginsight.com/angularjs-if-else-statement/

臭名昭著的angularjs if else声明！！！当我开始使用Angularjs时，我惊讶于找不到if / else语句。

因此，我在一个项目上工作，我注意到当使用if / else语句时，加载时会显示条件。您可以使用ng-cloak修复此问题。

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

谢谢阿马杜

斯丁番长 2020.03.13

好吧，我建议您使用返回true或false的函数检查控制器中的条件。

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

并在控制器中检查情况 

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
逆天猿理查德 2020.03.13

这是一个更简单的解决方案： 

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>

Chloe 2020.03.13

我将对此加以补充，因为其中一些答案似乎已过时。这是我的方法： 

<class="ng-class:isSelected">

其中“ isSelected”是在范围角度控制器内定义的javascript变量。


为了更具体地解决您的问题，以下是如何生成带有该列表的列表：

的HTML 

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>


JS 

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}


请参阅：http：//jsfiddle.net/tTfWM/

参见：http : //docs.angularjs.org/api/ng.directive : ngClass

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android