How to remove redundant code by using ng-repeat

Question

I am learning web programming and AngularJS. I have many redundant codes in the HTML file, but I don't know how to remove them.

HTML FILE:

<select id="selectSearch" ng-model="searchValue">
    <option value="7">7</option>
    <option value="6">6</option>
    <option value="5">5</option>
    <option value="4">4</option>
    <option value="3">3</option>
    <option value="2">2</option>
    <option value="1">1</option>
</select>
...
<tr>
    <td></td>
    <td colspan="3">Class</td>
    <td x-ng-if="searchValue >= 1">{{ getClass(studentYear)   }}</td>
    <td x-ng-if="searchValue >= 2">{{ getClass(studentYear+1) }}</td>
    <td x-ng-if="searchValue >= 3">{{ getClass(studentYear+2) }}</td>
    <td x-ng-if="searchValue >= 4">{{ getClass(studentYear+3) }}</td>
    <td x-ng-if="searchValue >= 5">{{ getClass(studentYear+4) }}</td>
    <td x-ng-if="searchValue >= 6">{{ getClass(studentYear+5) }}</td>
    <td x-ng-if="searchValue >= 7">{{ getClass(studentYear+6) }}</td>
</tr>
<tr>
    <td></td>
    <td colspan="3">Grades</td>
    <td x-ng-if="searchValue >= 1">{{ getGrades(studentYear)   }}</td>
    <td x-ng-if="searchValue >= 2">{{ getGrades(studentYear+1) }}</td>
    <td x-ng-if="searchValue >= 3">{{ getGrades(studentYear+2) }}</td>
    <td x-ng-if="searchValue >= 4">{{ getGrades(studentYear+3) }}</td>
    <td x-ng-if="searchValue >= 5">{{ getGrades(studentYear+4) }}</td>
    <td x-ng-if="searchValue >= 6">{{ getGrades(studentYear+5) }}</td>
    <td x-ng-if="searchValue >= 7">{{ getGrades(studentYear+6) }}</td>
</tr>
<tr>
    <td></td>
    <td colspan="3">Status</td>
    <td x-ng-if="searchValue >= 1">{{ getStatus(studentYear)   }}</td>
    <td x-ng-if="searchValue >= 2">{{ getStatus(studentYear+1) }}</td>
    <td x-ng-if="searchValue >= 3">{{ getStatus(studentYear+2) }}</td>
    <td x-ng-if="searchValue >= 4">{{ getStatus(studentYear+3) }}</td>
    <td x-ng-if="searchValue >= 5">{{ getStatus(studentYear+4) }}</td>
    <td x-ng-if="searchValue >= 6">{{ getStatus(studentYear+5) }}</td>
    <td x-ng-if="searchValue >= 7">{{ getStatus(studentYear+6) }}</td>
</tr>
...

I think I need to use ng-repeat && ng-init, but I don't know how to use them in this case..

You should consider going through the angularjs tutorial.

Tony
– Tony

2014-08-08 19:27:17 +00:00
Commented Aug 8, 2014 at 19:27 — Tony
– Tony, Commented Aug 8, 2014 at 19:27

Henrik Peinar · Accepted Answer · 2014-08-11 11:40:15Z

As it's pretty hard to actually understand what's the logic behind your tables, I've made a rather general example how you can use ng-repeat and ng-select to play with some data.

See the code below:

<div data-ng-controller="nodeTodayCtrl">
    <label for="selectYear">Select year you want info for</label>
    <select data-ng-model="selectedYear" data-ng-options="year for year in possibleYears"></select>

    <!-- we are assuming that there are in total of 9 classes and after that they've finished school -->
    <table>
        <tr>
            <td>Name</td>
            <td>Gender</td>
            <td>Is in class on selected year</td>
        </tr>
        <tr data-ng-repeat="student in students">
            <td>{{student.name}}</td>
            <td>{{student.gender}}</td>
            <td>{{ getClass(student, selectedYear); }}</td>
        </tr>
    </table>
</div>

Javascript:

$scope.possibleYears = [];
$scope.yearRange = 10;

// populate possible years, start from 0 to include current year
for(var i = 0; i <= $scope.yearRange;i++) {
    $scope.possibleYears.push((new Date()).getFullYear() + i);
}

$scope.getClass = function(student, selectedYear) {
    var currentYear = (new Date()).getFullYear();

    // default to current year
    if(!selectedYear) {
        selectedYear = currentYear;
    }
    var classIn = student.class + (selectedYear - currentYear);

    return (classIn > 9) ? 'Finished school '+ (classIn - 9) +' year(s) ago' : classIn;    
};

// your students data
$scope.students = [{}, ...];

Please see fiddle for working example with full code:

http://jsfiddle.net/hpeinar/zwnbet95/

Alagarasan M · Accepted Answer · 2014-08-11 11:02:55Z

0

An example: You have an array like, Arrayed=[{value:1},{value:2},{value:3},{value:4},{value:5}];

<select id="selectSearch" ng-model="searchValue" ng-repeat="single in Arrayed">
   <option value="{{single.value}}">{{single.value}}</option>
</select>

Here as you see the html code is largely reduced in comparison with yours.

Use this:LINK FOR HELP

Hope it helps.......!

answered Aug 11, 2014 at 11:02

Alagarasan M

9078 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to remove redundant code by using ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related