在angularjs中顯示數組的自定義服務

任何人都可以請我解釋一下如何創建一個顯示數組的自定義服務。數組是在服務內部創建的，函數savedata（）用於保存數組中的對象。我想創建的另一個函數將顯示數組。在此先感謝在angularjs中顯示數組的自定義服務

<!DOCTYPE html> 
    <html ng-app="noteApp"> 
    <head> 
    <title>Note App</title> 
    <script src="angular.js"></script> 
    </head> 
    <body> 
    <div ng-controller="noteCtrl"> 
    <form name="noteForm"> 
     NoteId: <input type="number" name="id" ng-model="note.id" required> 
     NoteTitle: <input type="text" name="title" ng-model="note.title" required> 

     NoteDiscription: <input type="text" name="discription" ng-model="note.discription" required><br><br> 
     <button ng-click="add()" ng-disabled="noteForm.$invalid">Click</button> 
    </form> 
    <div ng-repeat="number in noteArray track by $index"> 
    <h3>{{::number.id}}</h3> 
    <h3>{{::number.title}}</h3> 
    <h3 >{{::number.discription}}</h3> 
</div> 
</div> 
    <script> 
    var app=angular.module('noteApp',[]); 
    app.service('dataService',function(){ 
    var noteArray=[]; 
    this.saveData=function(data){ 
    console.log(noteArray); 
    return noteArray.push(data); 
} 
this.displayData=function(){ 
//return zz; 
} 
}); 
app.controller('noteCtrl',function($scope,dataService) { 
$scope.add=function(){ 

dataService.saveData($scope.note); 

//dataService.displayData(); 
} 
}); 
</script> 
</body> 
</html>

來源

2017-08-28 Shoyeb Memon

你是在正確的軌道上，只是返回數組的displayData（）內

this.displayData=function(){ 
    return noteArray; 
}

DEMO

var app=angular.module('noteApp',[]); 
 
app.service('dataService',function(){ 
 
var noteArray=[]; 
 
this.saveData=function(data){ 
 
console.log(noteArray); 
 
return noteArray.push(data); 
 
} 
 
this.displayData=function(){ 
 
    return noteArray; 
 
} 
 
}); 
 
app.controller('noteCtrl',function($scope,dataService) { 
 
$scope.noteArray=[]; 
 
$scope.add=function(){ 
 
dataService.saveData($scope.note); 
 
$scope.noteArray = dataService.displayData(); 
 
} 
 
});

<html ng-app="noteApp"> 
 
<head> 
 
<title>Note App</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body> 
 
<div ng-controller="noteCtrl"> 
 
<form name="noteForm"> 
 
NoteId: <input type="number" name="id" ng-model="note.id" required><br><br> 
 
NoteTitle: <input type="text" name="title" ng-model="note.title" required> 
 
<br><br> 
 
NoteDiscription: <input type="text" name="discription" ng- 
 
model="note.discription" required><br><br> 
 
<button ng-click="add()" >Click</button> 
 
</form> 
 
<div ng-repeat="number in noteArray track by $index"> 
 
<h3 >{{number.id}}</h3> 
 
<h3 >{{number.title}}</h3> 
 
<h3 >{{number.discription}}</h3> 
 
</div> 
 
</div> 
 
    
 
</body> 
 
</html>

來源

2017-08-28 17:24:56 Sajeetharan

非常感謝！ :) –

嗯，我想，你需要這樣的一些：

'use strict'; 
app.factory('$shared',[function(){ 
    function foo() { 
     var self = this; 
     self.list = []; 
    } 
    return new foo(); 
}]); 
app.controller('mainCtrl', ['$scope', '$shared', function($scope, $shared){ 
    $scope.shared = $shared; 
    //... many things here 
    $scope.onClick = function() { 
     // be sure that, I use "shared" from $scope, no directly like "$shared" 
     $scope.shared.list.push("val1"); 
     console.log("my shared array:", $scope.shared.list); 
    } 
}]); 
app.controller('secondCtrl', ['$scope', '$shared', function($scope, $shared){ 
    $scope.shared = $shared; 
    //... many things here 
    $scope.onKeyPress = function() { 
     // be sure that, I use "shared" from $scope, no directly like "$shared" 
     $scope.shared.list.push("val2"); 
     console.log("my shared array:", $scope.shared.list); 
    } 
}]);

來源

2017-08-28 17:27:33 ray

在angularjs中顯示數組的自定義服務

回答

相關問題