Angular js ng重复
[英]Angular js ng repeat
问题描述
In above code data are coming from server side in studentsData. 
上面的代码数据来自studentsData中的服务器端。 This is an array object and I am adding $scope object with studentsData. 这是一个数组对象，我将$ scope对象与studentsData添加在一起。 In other pages I want to access a data from this json object studentsData. 在其他页面中，我想访问此json对象studentsData中的数据。 With the help of ng repeat angularjs ng directive here is my code 借助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
You need to post your controller code, not just the HTML. 您需要发布控制器代码，而不仅仅是HTML。 But briefly, if you want to share data across multiple pages as you say 1) each page should have its own controller 2) put the code that gets the data in a service, and 3) inject the data service into each controller. 但是简单地说，如果您要跨多个页面共享数据，如您所说的：1）每个页面都应该有其自己的控制器2）将获取数据的代码放入服务中，以及3）将数据服务注入每个控制器中。
A good intro to service basics is https://www.airpair.com/javascript/posts/services-in-angularjs-simplified-with-examples 关于服务基础的一个很好的介绍是https://www.airpair.com/javascript/posts/services-in-angularjs-simplified-with-examples
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.