Question

我有一个简单的列表项，用ng-repeat解析：

<ul>
    <li ng-repeat="item in items" class="commonClass" ng-class="{'on': on_var}" ng-click="on_var=!on_var"> 
   {{item.name}} 
    <li>
</ul>

单击列表项将按预期添加类名“on”。但是我想在你点击另一个列表项后立即删除所有其他'on'类，只将它添加到单击的那个类中。我来自jQuery背景，我是角色的新手。我想做的就是这样：

$("li.commanClass").click(function(){ 
    $("li.commonClass").removeClass('on');
    $(this).addClass('on');
})

我想知道实现这一结果的“角度方式”是什么

jsfiddle

感谢。

Answer 1

在angular中，您希望尽可能将对象引用传递给子作用域。这样，您就可以使用可以分支到多个级别的原型对象继承。

将范围视为model。在ng-repeat的情况下，它为每个元素创建子范围。因此，如果父作用域包含模型，则它将作为对子作用域的引用传递。这些子作用域中的每一个都将保存对父作用域模型对象的引用。

因此你可以这样做：

<li ng-repeat="item in model.items" 
    ng-class="{'on': model.selected==item}" 
    ng-click="model.selected=item">{{ item.name }}</li>

然后在控制器中：

$scope.model = {
        selected: null,
        items = [
            {name: "Apple"}, 
            {name: "Banana"}, 
            {name: "California"}
         ]
    };

尽量避免使用上述答案的功能。这些函数将被多次调用，并会增加不必要的额外开销。

有价值的帖子："Thinking in AngularJS" if I have a jQuery background?

的 DEMO

Answer 2

您可以向范围中添加变量以维护选择的项目，以及范围内用于切换变量的函数。

控制器：

app.controller('myCtrl', function($scope) {
    $scope.items = 
    [
        {name: "Apple"},
        {name: "Banana"},
        {name: "California"}
    ]

    $scope.selectItem = function( item ) {
        $scope.selectedItem = item;
    };
})

HTML：

<div ng-app="myApp">
    <ul ng-controller="myCtrl">
        <li ng-repeat="item in items" class="commonClass" ng-class="{'on': selectedItem === item}" ng-click="selectItem(item)">
            {{ item.name }}
        </li>
    </ul>
</div>

Answer 3

来自jsparks的小提琴回答：

http://jsfiddle.net/eHDTF/

See fiddle for code!

Answer 4

我认为您应该为整个项目而不是控制器引用指令。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>Balken</title>
     <script src="echarts.js"></script>
<link rel="stylesheet" href="style.css">

  </head>
  <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <div id="body">
      <div id="chart"></div>
    </div>

         <!-- prepare a DOM container with width and height -->
    <div id="main" style="width: 750px;height:500px;"></div>
    <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var 

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'        
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'Salami',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};
        // use configuration item and data specified to show chart
        myChart.setOption(option);

        var canvas = document.getElementById("main");
var dataURL = canvas.toDataURL();

//console.log(dataURL);

$("#exportButton").click(function(){
    var pdf = new jsPDF();
    pdf.addImage(dataURL, 'JPEG', 0, 0);
    pdf.save("download.pdf");
});


   </script>
<button id="exportButton" type="button">Export as PDF</button>

     </body>
</html>

然后创建activeMe指令：

<div class="nav-item">
    <ul>
        <li active-me="on">Item 1</li>
        <li active-me="on">Item 2</li>
        <li active-me="on">Item 3</li>
        <li active-me="on">Item 4</li>
        <li active-me="on">Item 5</li>
    </ul>
</div>

从Angular中单击ng-click的所有子项中删除Class除了单击子项

4 个答案: