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.