Question

我有两个对象。

$scope.OBJ1=[
    {"primaryKey":1,"value":"something1"},
    {"primaryKey":2,"value":"something2"},
    {"primaryKey":3,"value":"something3"},
    {"primaryKey":4,"value":"something4"}
];

$scope.OBJ2=[
    {"primaryKey":1,"dayPart":"dinner"},
    {"primaryKey":1,"dayPart":"lunch"}
];

我正在使用ng-repeat-start和ng-repeat-end，如下所示：

<tr ng-repeat-start="obj1 in OBJ!" >
    <td colspan="9" >
       {{obj1.value}}
    </td>
</tr>
<tr ng-repeat-end ng-repeat="obj2 in OBJ2" >
    <td>{{obj2.dayPart}}</td>
</tr>

它产品输出：

<tr>something1</tr>
<tr>dinner</tr>
<tr>lunch</tr>

<tr>something2</tr>
<tr>dinner</tr>
<tr>lunch</tr>

<tr>something3</tr>
<tr>dinner</tr>
<tr>lunch</tr>

<tr>something4</tr>
<tr>dinner</tr>
<tr>lunch</tr>

我需要知道当我点击第一个tr（例如something1）时，它可以切换到另一个tr（晚餐和午餐）。它怎么能动态地实现。谢谢！！！

Answer 1

我使用指令重写了上述内容。你可能想要给它一些润色，但它给你的想法。我还将表行和单元格更改为div，这是更好的做法，但同样，您可以更改它以满足您的要求。

所以html看起来像这样：

<objects object-list = 'OBJ1' object-list-two='OBJ2'></objects>

该指令如下：

 myApp.directive('objects', function() {
return {
    restrict: 'E',
    replace: true,
    scope: {
        objectList : '=',
        objectListTwo : '='
    },
    controller: function($scope) {
         $scope.itemSelected ="";

        $scope.showSelected = function(index) {
            console.log("selected index = " + index);
            $scope.itemSelected = $scope.objectList[index];
        };

        $scope.showClass = function(index) {
            return ($scope.itemSelected === $scope.objectList[index] ? "showToggle" : "hideToggle");
        }
    },
    template:      '<div><div ng-repeat-start="obj1 in objectList" >'+
        '    <div colspan="9" ng-click="showSelected($index)" > '+
        '        {{obj1.value}}  '+
        '     </div>   '+
        '        <div ng-repeat="obj2 in objectListTwo" ng-class="showClass($parent.$index)"  >     '+
        '           <div>{{obj2.dayPart}}</div>  '+
        '       </div>  '+
        '     </div>  '+
        '     <div  ng-repeat-end ></div></div>'

};
});

有几个css类：

 .hideToggle{
    display:none;
 }

.showToggle{
    display:block;
}

在AngularJS中切换ng-repeat-start和ng-repeat-end

1 个答案: