javascript - 在angularjs中显示数组的自定义服务

标签 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>

最佳答案

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

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

演示

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>

关于javascript - 在angularjs中显示数组的自定义服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45924164/

相关文章:

javascript - ui-router 状态转换动画的替代方法

javascript - 简单的 Angular JS 过滤器不起作用

javascript - 使用 res.send 返回成功

javascript - 如何设置和跟踪用户的在线状态

javascript - Back Space 在日期选择器中重定向到 chrome 上的上一页

javascript - 在调整大小时将图像高度应用于 Div

javascript - 从 javascript/jquery 调用 AS 函数

javascript - HTML canvas drawImage 不能正常用于横向图像

javascript - 区分IE7浏览器和IE7兼容模式下的浏览器

javascript - 动态 Canvas 宽度和高度