Question

我的静态html表有一个行点击事件，它突出了一个div。

静态表工作正常，但我的ng-repeat表有一些问题。我现在可以使用红色边框突出显示我的div，但是如何在点击其他内容时删除边框？

这是静态表示例：

<script type="text/javascript">
    
    $('.image-clicked').click(function () {
        debugger;
        $(this).css("border", "2px solid red");
    });

    $('.clickable_row td div').click(function (e) {
        // clear all borders first, highlight  clicked image
        var imageclicked = $(this).data('url');
        $('.propertyTable td div').css("border", "none");
        
        $(this).css("border", "2px solid red");                        
    });
</script>

<table id="gadgets" class="propertyTable clickable_row">

        <tr>
            <th>Type</th>
        </tr>
        <tr>
            <td data-url="chart_treelist">
                <div><img data-draggable id="chart_treelist" src="images2/table.png" title="Tree Grid" alt="Hierarchy Grid" width="64" height="64">Grid</div>
            </td>   
            <td data-url="{chart_pivot}">
                <div><img data-draggable id="chart_pivot" src="images2/pivottable.png" title="Pivot Table"   alt="Pivot Table" width="64" height="64">Pivot</div>
            </td> 
        </tr>
        <tr>
            <td>
                <div><img data-draggable id="chart_bar" src="images2/bar.png" title="Bar" width="64" height="64">Bar</div>
            </td>
            <td>
                <div><img data-draggable id="chart_line" src="images2/line.fast.png" title="Line" >Line</div>
            </td>
        </tr>
        <tr>
            <td>
                <img data-draggable id="chart_pie" src="images2/pie.png" title="Pie" alt="Pie" width="64" height="64">Pie
            </td>
            <td><img data-draggable id="chart_area" src="images2/area.png"  title="Area" alt="Area" width="64" height="64">Area</td>            
        </tr>
        <tr>
            <td>
                <img data-draggable id="chart_scatter" src="images2/point.png" title="Scatter" width="64" height="64">Scatter
            </td>
            <td>
                <img data-draggable id="chart_bubble" src="images2/bubble.png" title="Bubble" width="64" height="64">Bubble
            </td>
        </tr>                        
            
    </table>

这是AngularJS ng-repeat生成的表。

FYI：如果initImage值相等，ng-class将分配image-border类。 ng-click进入控制器并根据刚刚选择的内容重新分配图表。

问题：我无法弄清楚如何选择带有红色边框的新图表图标，同时删除其他图标上的image-border课程。

(function () {
    'use strict';
    angular.module('rage')
       .controller('GadgetIconsCtrl', ['$rootScope', '$scope',  icons]);

    function icons($rootScope, $scope) {

        var gadgets = this;

        gadgets.subset = null;
        gadgets.chartSelected = null;

        gadgets.selectChart = function (chart) {
            // the assumption is that user selected a different chart icon from the formatting tab
            gadgets.chartSelected = chart;
        };
        
        if ($scope.widget.gadgetType == 'chart' && $scope.widget.chartType == 'bar') {
            // user is configuring a bar chart type, so we also include 'column' in our subset of icons to display
            gadgets.subset = _.filter($scope.widgetDefs, function (item) {
                return item.chartType == 'bar' || item.chartType == 'column';
            });
        }
    };   // end of gridSettings()    
})();

<style scoped>
    .image-clicked {
        border: 2px solid red;
    }
    .image-unclicked {
        border: 2px solid red;
    }
    
</style>

<table ng-controller="GadgetIconsCtrl as gadgets" >
            <tr ng-repeat="gadget in gadgets.subset"  >
                <td>
                    <!-- the image icon for this widget should have a css border, otherwise none -->
                    <div ng-class="{'image-border': gadget.initImage===widget.initImage}">
                        <img ng-click="gadgets.selectChart(gadget.name)" ng-src="{{gadget.initImage}}" title="{{gadget.title}}" 
                            width="64" height="64">{{gadget.title}}
                    </div>
                </td>
            </tr>
        </table>

我确信有一个更好的Angular方法，但我仍然试图在这个用例中找出ng-click和ng-class的最佳用法。

非常感谢帮助。

感谢，鲍勃

Answer 1

试试这个!!现在不能运行角度，但我认为它应该有效！

＆＃13;

< script type = "text/javascript" >
  var lastobj = "";

function clickImage(obj, $event) {
  debugger;
  if (lastobj != obj) {
    $(lastobj).css("border", "0px");
  } else {
    $($event.target).css("border", "2px solid red");
  }
};

function clickRow(obj, $event) {

//obj should be the widget
//There you should do similar..
var imageclicked = $($event.target).data('url');
$('.propertyTable td div').css("border", "none");
$($event.target).css("border", "2px solid red");
}); < /script>

＆＃13;

<table ng-controller="GadgetIconsCtrl as gadicons">
  <tr ng-repeat="widget in gadicons.widgetSubset">
    <td>
      <div ng-click="clickRow(widget)" class="image-clicked">
        <img data-draggable ng-click="clickImage(widget)" ng-src="{{widget.initImage}}" title="{{widget.title}}" width="64" height="64">{{widget.title}}
      </div>
    </td>
  </tr>
</table>

＆＃13;

修改我添加了未设置的边框功能，并更正了angularjs的一些拼写和语法错误。希望它有效!!

Answer 2

我开了一个新的plnkr http://plnkr.co/edit/w3Ojy5Eo40QHDtUxJfft 对于你的问题。

您可以使用ng-clik并将click事件（和受影响的元素）注入处理程序：

$scope.widgetClick = function($event) {
  $event.srcElement.style.border = "2px black solid";
}

对应的html：

<div class="image-clicked" ng-click="widgetClick($event)"> ... </div>

对于简单的dom操作，比如添加或删除css类，最好只使用angular而不是用jQuery混合。

自己处理dom / css更改更多＆＃34; jQuery方式＆＃34;。另一方面，使用Angular，您将更改模型的数据和让框架执行dom / css工作。

对于您的示例（使用我的plunkr代码）：为ng-repeat定义小部件，如：

{
  title : "Foobar ",
  initImage : "http://lorempixel.com/10/10/",
  clicked: false
}

并在处理程序中更改clicked：

$scope.widgetClick = function(widget) {
  widget.clicked = true;
};

对应的html：

<div ng-click="widgetClick(widget)" ng-class="{clicked: widget.clicked}">

如果widget.clicked更改为true，则将按角度添加css类.clicked。

为什么这样更好？代码中没有Css / Dom操作。一切都干净漂亮。

编辑：

如何从之前选择的小部件中删除.clicked类？

我们需要在控制器中保留对所选小部件的引用：

var selectedWidget = null;
$scope.widgetClick = function(w) {
  if(selectedWidget) selectedWidget.clicked = false;
  selectedWidget = w;
  w.clicked = true;
};

现在，当选择（单击）另一个窗口小部件时，我们只需要更新模型数据：将先前选定窗口小部件上的clicked属性设置为false，并在所选窗口小部件上将其更改为true。并更新对selectedWidget的引用。 Angular将关注css。更新了plnkr http://plnkr.co/edit/IqWc1W9N12SH8K72jAun?p=preview

使用AngularJS ng-repeat设置表格

2 个答案: