使用angularjs条件CSS [英] Conditional css using angularjs

问题描述

我是新来的角，并试图点击时改变一种风格。我有一个模板，我创建在页面上使用相同的模板2-3的内容空间。当用户点击一个更多链接我要展开该部分。我能够做到这一点使用下面的code，然后触发一个CSS

 ＆LT; A HREF =＃NG点击=isActive = isActive！＆GT;＆LT;强＆GT;详情＆lt; / STRONG＆GT;＆LT; / A＆GT;
 

我奋力的地方是，如果用户点击另一款以扩大我要崩溃了previously扩展部分，并扩大现有的部分，而目前扩大适用于当前的部分。

解决方案

如果你只是想在任何给定的时间选择了一个项目，通过将selectedItem在$范围和使用驾驶这NG-如果在模板检查所选择的项目是当前项目。例如：

\r

\r

angular.module（'对myApp'，[]）\r
\r
.controller（'MainController'，函数（$范围）{\r
    变种项= []，\r
        VM = {};\r
\r
    //性质\r
    $ scope.vm = VM;\r
    vm.items =物品;\r
    vm.selectedItem = NULL;\r
    \r
    //方法\r
    vm.setItem =功能（项目）{\r
        //当前项重置为更多\r
        如果（vm.selectedItem）{\r
          vm.selectedItem.detailsText =更多;\r
        }\r
\r
        //如果选择同一项目崩溃\r
        如果（项目=== vm.selectedItem）{\r
            vm.selectedItem = NULL;\r
            返回;\r
        }\r
        \r
        item.detailsText ='少';\r
        vm.selectedItem =项目;\r
    };\r
    \r
    启用（）;\r
    \r
    //初始化逻辑\r
    功能激活（）{\r
        对于（VAR I = 0; I＆LT; 15; ++ I）{\r
            items.push（{ID：一，标题：产品：+ I，细节：'项目'+ I +详细资料，detailsText：更多}）;\r
        }\r
    }\r
}）;

\r

HTML {\r
    箱尺寸：边界盒;\r
}\r
\r
*，*：之前，*：{后\r
    箱尺寸：继承;\r
}\r
\r
一个 {\r
  颜色：＃004b8d;\r
  文字修饰：下划线;\r
  光标：指针;\r
}\r
\r
答：悬停{\r
  颜色：＃2c88e6;\r
  文字修饰：无;\r
}\r
\r
。容器 {\r
    宽度：500像素;\r
    边框：1px的纯黑色;\r
}\r
\r
.item {\r
    填充：12px的;\r
    下边框：1px的固体灰色;\r
}\r
\r
.item：最后的孩子{\r
    边框：0;\r
}\r
\r
.details {\r
    保证金左：10px的;\r
    颜色：绿色;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=对myAppNG控制器=MainController级=容器＆GT;\r
    ＆LT; D​​IV CLASS =项NG重复=，在vm.items项目＆GT;\r
        {{item.title}}＆下;一个纳克单击=vm.setItem（项目）＆GT; {{item.detailsText}}＆下; / A＆GT;\r
        ＆LT; D​​IV CLASS =详细信息NG-IF =vm.selectedItem ===项目＆GT;\r
            {{item.details}}\r
        ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

这将使其更容易通过控制器和模板更新，而不必重复模板的部件停用为实例。任何逻辑也直接控制器这是单元测试里面更好的生活。例如：

 它（'应更新选中的项目'，函数（）{
    // ...初始化控制器和$作用域属性
    变种项= {};
    $ scope.vm.setItem（项目）;
    期待（$ scope.vm.selectedItem）.toBe（项目）;
    期待（item.detailsText）.toBe（'减'）;
}）;
 

I am new to angular and trying to change a style when clicking. I have a template and I create 2-3 content space using the same template on the page. When user clicks on a "more" link I want to expand that section. I am able to do that using the following code which then triggers a css

<a href="#" ng-click="isActive = !isActive"><strong>more</strong></a>

The place I am struggling is, if the user clicks another section to expand I want to collapse the previously expanded section and expand the current section, whereas currently the expansion applies to the current section.

解决方案

If you only want to have one item selected at any given time, drive this through selectedItem on the $scope and use ng-if in the template to check if the selected item is the current item. Example:

angular.module('myApp', [])

.controller('MainController', function ($scope) {
    var items = [],
        vm = {};

    // properties
    $scope.vm = vm; 
    vm.items = items;
    vm.selectedItem = null;
    
    //methods
    vm.setItem = function (item) {
        // reset current item to more
        if (vm.selectedItem) {
          vm.selectedItem.detailsText = 'More';
        }

        // collapse if selecting same item
        if (item === vm.selectedItem) {
            vm.selectedItem = null;
            return;
        }
        
        item.detailsText = 'Less';
        vm.selectedItem = item;
    };
    
    activate();
    
    // initialization logic
    function activate() {   
        for(var i = 0; i < 15; ++i) {
            items.push({id: i, title: 'Item: ' + i, details: 'Item ' + i + ' Details', detailsText: 'More'});
        }
    }
});

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

a {
  color: #004b8d;
  text-decoration: underline;
  cursor: pointer;
}

a:hover {
  color: #2c88e6;
  text-decoration: none;
}

.container {
    width: 500px;
    border: 1px solid black;
}

.item {
    padding: 12px;
    border-bottom: 1px solid gray;
}

.item:last-child {
    border: 0;
}

.details {
    margin-left: 10px;
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController" class="container">
    <div class="item" ng-repeat="item in vm.items">
        {{item.title}} <a ng-click="vm.setItem(item)">{{item.detailsText}}</a>
        <div class="details" ng-if="vm.selectedItem === item">
            {{item.details}}
        </div>
    </div>
</div>

This will make it easier to update through the controller and template, rather than having to duplicate parts of the template to deactivate for instance. Any logic also lives directly inside the controller which is better for unit tests. For example:

it('should update selected item', function () {
    // ... initialize controller and $scope properties
    var item = {};
    $scope.vm.setItem(item);
    expect($scope.vm.selectedItem).toBe(item);
    expect(item.detailsText).toBe('Less');
});

这篇关于使用angularjs条件CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！