Angular js ng重復
[英]Angular js ng repeat
問題描述
上面的代碼數據來自studentsData中的服務器端。 這是一個數組對象，我將$ scope對象與studentsData添加在一起。 在其他頁面中，我想訪問此json對象studentsData中的數據。 借助ng repeat angularjs ng指令，這是我的代碼
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="angular/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controller/studentsmarks.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>
<span class="black-text">School Management Site</span>
</h1>
</div><!--
header end
--><div id="topmenu">
<ul>
<li>
<a href="school_home_page.jsp">HOME</a>
</li>
<li>
<a href="student_info_page.jsp">STUDENTS</a>
</li>
<li>
<a href="class_info_.jsp">CLASSINFORMARION</a>
</li>
<li>
<a href="student_search_info.html">SEARCH</a>
</li>
<li>
<a href="manage_student_marks.html">STUDENTMARKS</a>
</li>
<li>
<a href="logout.jsp">LOGOUT</a>
</li>
</ul>
</div><!--
topmenu end
--><div id="content">
<div ng-controller="studentMarksController" ng-init="getStudentsInfoMarks()">
<form name="studentform" ng-submit="submitStudentForm(studentform.$valid)" novalidate>
<label for="name" style="color: blue;">StudentRollNo:</label><br/>
<select id="rollId" name="StudentrollNumber" ng-model="student.rollNumber" style="margin-left: 30px" >
<option value="">-- Select RollNo: --</option>
<option ng-repeat="StudentrollNumber in studentsData" value="{{StudentrollNumber.rollNumber}}">{{StudentrollNumber.rollNumber}}</option>
</select>
<div class="form-group">
<label for="name" style="color: blue;">PhysicsMarks:</label>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="studentPhysicsMarks"
name="studentPhysicsMarks" ng-model="student.studentPhysicsMarks" required
placeholder="PhysicsMarks:">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.studentPhysicsMarks.$error.required && submitted">
PhysicsMarks is required.</span>
</div>
</div>
</div>
<br/>
<br/>
<div class="form-group">
<label for="name" style="color: blue;">ChemistryMarks:</label>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="studentChemistryMarks"
name="studentChemistryMarks" ng-model="student.studentChemistryMarks" required
placeholder="ChemistryMarks">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.studentChemistryMarks.$error.required && submitted">
ChemistryMarks is required.</span>
</div>
</div>
</div>
<br/>
<br/>
<div class="form-group">
<label for="name" style="color: blue;">MathsMarks:</label>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="studentMathsMarks"
name="studentMathsMarks" ng-model="student.studentMathsMarks" required
placeholder="MathsMarks">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.studentMathsMarks.$error.required && submitted">
MathsMarks is required.</span>
</div>
</div>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<div class="container">
<table class="table">
<tr>
<th>StudentRollNo</th>
<th>PhysicsMarks</th>
<th>ChemistryMarks</th>
<th>MathsMarks</th>
</tr>
<tr class="info" ng-repeat="studentmarks in studentsData">
Total Number of Student:<label style="color: black">{{studentsData.length}}</label>
<td>
{{studentmarks.rollNumber}}
</td>
<td>
{{studentmarks.physicsMarks}}
</td>
<td>
{{studentmarks.chemistryMarks}}
</td>
<td>
{{studentmarks.mathMarks}}
</td><!--
<td>
<input type="button" class="btn btn-danger" name="Danger" value="Delete" ng-click = "deleteStudent(student.addresId)">
</td>
--></tr>
</table>
</div>
</div>
</div><!--
content endss
--></div><!--
container end
1 個解決方案
解決方案1
1 2015-09-04 18:21:29
您需要發布控制器代碼，而不僅僅是HTML。 但是簡單地說，如果您要跨多個頁面共享數據，如您所說的：1）每個頁面都應該有其自己的控制器2）將獲取數據的代碼放入服務中，以及3）將數據服務注入每個控制器中。
關於服務基礎的一個很好的介紹是https://www.airpair.com/javascript/posts/services-in-angularjs-simplified-with-examples
Angular JS ng-repeat和“ this”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.