我正在学习web编程和AngularJS。我在HTML文件中有很多多余的代码,但我不知道如何删除它们。
HTML文件:<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>
...
我想我需要使用ng-repeat &&ng-init,但是我不知道在这种情况下如何使用它们
由于很难真正理解表背后的逻辑,因此我做了一个相当一般的示例,说明如何使用ng-repeat和ng-select来处理一些数据。
请看下面的代码:
<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 = [{}, ...];
请参阅完整代码示例:
http://jsfiddle.net/hpeinar/zwnbet95/示例:您有一个数组,排列=[{值:1},{值:2},{值:3},{值:4},{值:5}];
<select id="selectSearch" ng-model="searchValue" ng-repeat="single in Arrayed">
<option value="{{single.value}}">{{single.value}}</option>
</select>
如你所见,这里的html代码与你的相比大大减少了。使用this:LINK FOR HELP
希望有帮助.......!