自定义服务以在angularjs中显示数组

时间:2017-08-28 17:10:27

标签: javascript angularjs

任何人都可以向我解释如何创建一个用于显示数组的自定义服务。数组是在服务中创建的,还有一个函数savedata(),它将对象保存在数组中。就像我想创建的另一个函数一样将显示该数组。提前谢谢

<!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>

2 个答案:

答案 0 :(得分:1)

你在正确的轨道上,只需返回displayData()

中的数组
this.displayData=function(){
  return noteArray;
}

<强> DEMO

&#13;
&#13;
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();
}
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

嗯,我认为你需要这样的东西:

'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);
    }
}]);