JSON數據上的Angularjs
[英]Angularjs on JSON data
問題描述
實際上，我當時正在使用angularJS對JSON數據進行一些計算操作，請問有人可以幫助我解決此問題。 enter code here 的代碼片段 。 如果您查看“ script.js”文件，則有一個JSON數據“ marksArray”，我必須計算每個學生的總成績（例如abc的總成績為85），還必須計算那里有多少學生（分開）計數為-abc：2，pqr：2，xyz：3）。 請幫我解決這個問題。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="mainController">
<label for="repeatSelect1"> Field 2: </label>
<select name="repeatSelect1" id="repeatSelect1" ng-model="data.repeatSelect1">
<option ng-repeat="(key, val) in marksArray[0]" value="{{val}}">{{key}}</option>
</select>
<br />
<strong>Selected student:</strong>
<br />
<textarea>{{chosen | json}}</textarea>
<br />
<br />
</div>
</body>
</html>
Java腳本
angular.module('myapp')
.controller("mainController", function ($scope){
$scope.marksArray = [
{name: "abc", Marks: "50"},
{name: "xyz", Marks: "44"},
{name: "abc", Marks: "35"},
{name: "xyz", Marks: "55"},
{name: "pqr", Marks: "67"},
{name: "xyz", Marks: "65"},
{name: "pqr", Marks: "45"}
];
});
3 個解決方案
解決方案1
1 已采納 2016-02-15 05:13:06
您在這里有幾處錯誤。
您忘記了包含angular.js：
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>您沒有正確聲明myapp。 使用
angular.module('myapp',[])代替angular.module('myapp')- 不要在
options上使用ng-repeat，而要使用ng-options。<select name="repeatSelect1" ng-options="item as item.name for item in marksArray" id="repeatSelect1" ng-model="chosen"></select>
添加此內容以顯示所選項目的總計：
$scope.updateTotal = function(item) {
var t = 0;
$scope.marksArray.forEach(function(i) {
if(i.name == item.name){
t += parseInt(i.Marks,10);
}
});
$scope.total = t;
}
解決方案2
0 2016-02-15 05:17:05
var totalMarks = 0;
$scope.marksCount = function(studentName) {
for (var i = $scope.marksArray.length - 1; i >= 0; i--) {
if (studentName == $scope.marksArray.name[i]) {
var totalMarks = totalMarks + $scope.marksArray.Marks[i];
}
}
}
解決方案3
0 2016-02-15 06:00:55
html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="mainController">
<label for="repeatSelect1"> Student: </label>
<select name="repeatSelect1" id="repeatSelect1" ng-model="selectedStudent">
<option value=""> --Choose a student--</option>
<option ng-repeat="student in students" value="{{student}}">{{student}}</option>
</select>
<br />
<strong>Selected student:</strong> {{selectedStudent || 'no one'}}
<br />
<div ng-show="selectedStudent">
<span>total marks:</span> {{totalMarksPerStudent(selectedStudent)}} </br>
<span>student count:</span> {{ totalStudentCount(selectedStudent) }}
</div>
<br />
<br />
</div>
</body>
</html>
腳本
angular.module('myapp',[])
.controller("mainController", function ($scope)
{
$scope.marksArray = [
{name: "abc", Marks: "50"},
{name: "xyz", Marks: "44"},
{name: "abc", Marks: "35"},
{name: "xyz", Marks: "55"},
{name: "pqr", Marks: "67"},
{name: "xyz", Marks: "65"},
{name: "pqr", Marks: "45"}
];
$scope.students = [];
(function(){
var auxArray = [];
for (var i = 0; i < $scope.marksArray.length; i++){
if(typeof auxArray[$scope.marksArray[i].name] === 'undefined'){
$scope.students.push($scope.marksArray[i].name);
auxArray[$scope.marksArray[i].name] = 1;
}
}
})();
$scope.totalMarksPerStudent = function(studentName){
var marks = 0;
for (var i = 0; i < $scope.marksArray.length; i++){
if($scope.marksArray[i].name === studentName){
marks = marks + parseInt($scope.marksArray[i].Marks);
}
}
return marks
}
$scope.totalStudentCount = function(studentName){
var studentCount = 0;
for (var i = 0; i < $scope.marksArray.length; i++){
if($scope.marksArray[i].name === studentName)
studentCount++;
}
return studentCount
}
});
塞子網址： http ://plnkr.co/edit/TEAr9yaf47VlaiYaxBKN
Angular.js中的Json數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.