Custom service to display array in angularjs

Question

Can anyone please explain to me how to create a custom service for displaying the array .the array is created inside the service and a function savedata() which saves the objects in the array.like wise another function i want to create which will display the array. thanks in advance

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

Sajeetharan · Accepted Answer · 2017-08-28 17:24:56Z

You are on the right track, just return the array inside the 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>

ray · Accepted Answer · 2017-08-28 17:27:33Z

Well I think that you need some like that:

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

Collectives™ on Stack Overflow

Custom service to display array in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related