-1

I have requirement where i need to make ng-repeat work only at one place. i will define id where it should work something like this.I want to do this from controller

$(#1).(ng-repeat work) something like this

eg:

 <table id="1">
<tr ng-repeat="item in items">
<td></td> 
</table>

<table id="2">
<tr ng-repeat="item in items">
<td></td> 
</table>

Fiddle link:-http://jsfiddle.net/7MhLd/580/

How to acheive this

Thanks

user3106347
  • 639
  • 2
  • 10
  • 27

3 Answers3

1

You have three options:

(1) Use ng-show in your code. 

<table id="1">
  <tr ng-repeat="item in items" ng-show="/* code to check parent id */">
  <td></td> </tr>
</table>

<table id="2">
  <tr ng-repeat="item in items" ng-show="/* code to check parent id */">
  <td></td> </tr>
</table>

This may be a littlte inperformant.

(2) Only use ng-repeat when you need it. If this is generated by php code, check there if $i == 1 and do not echo ng-repeat if not.

(3) Use conditional ng-repeat's as shown in this answer.

EDIT: Sorry for the strange list, the code doesn't show if it's done the usual way.

Community
  • 1
  • 1
Sebb
  • 871
  • 6
  • 16
0

As far as I understand question, you have to define new model for items which should be displayed in #1, and other one to be displayed #2. Fill first model with data to be displayed in #1 (using Js), and the same for second model. Then bind another models like this: 

<table id="1">
    <tr ng-repeat="item in items1">
    <td>{{item.id}}</td> 
</table>

<table id="2">
    <tr ng-repeat="item in items2">
    <td>{{item.id}}</td> 
</table>
ozgus
  • 179
  • 8
0

I think what you mean is to show/hide the ng-repeat contents as per the id that is to be passed.

I have an updated fiddle to handle precisely that.

HTML code:

<div ng-controller="MyCtrl">
    <table id="1" border=1>
        <tr ng-repeat="line in lines" ng-show="line.id == 1">
            <td>{{line.text}}</td>
        </tr>
    </table>
    <table id="2" border=1 style="margin-top:10px">
        <tr ng-repeat="line in lines" ng-show="line.id == 2">
            <td>{{line.text}}</td>
        </tr>
    </table>
</div>

JS Code:

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.lines = [{
        id: 1,
        text: 'res1'
    }, {
        id: 1,
        text: 'res2'
    }];
}

UPDATE (json without the id attribute):

Fiddle

HTML Code:

<div ng-controller="MyCtrl">
    <table id="1" border=1>
        <tr ng-repeat="line in lines" ng-show="id == 1">
            <td>{{line.text}}</td>
        </tr>
    </table>
    <table id="2" border=1 style="margin-top:10px">
        <tr ng-repeat="line in lines" ng-show="id == 2">
            <td>{{line.text}}</td>
        </tr>
    </table>
</div>

JS Code:

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
    $scope.id = 1;
    $scope.lines = [{
        text: 'res1'
    }, {
        text: 'res2'
    }];
}
V31
  • 7,626
  • 3
  • 26
  • 44