Question

我通过做小练习来学习角度。我已成功在控制器中显示对象并尝试学习使用服务和工厂。我没有成功使用服务在表上显示数组“名称”。请查看我的代码，看看我做错了什么，以及如何使用工厂显示相同的数组。这是我的代码

收到部分答案后编辑的问题：

工厂不是没有展示信息种族。

var myApp = angular.module("app",[]);

myApp.filter("agefilter", function(){

var x= function(age){
    if(age==23||age==22){

        return "Young";
    }

    if(age==25){

        return "Mature";
    }
    if(age==26){

        return "Oldest";
    }
}
return x;
});





myApp.controller("ctrl", function($scope,factoryy){

    $scope.person=[

       {name:"jay",age:25,salary:85000},
        {name:"anu",age:23,salary:65000},
         {name:"jose",age:26,salary:75000},
          {name:"sharon",age:22,salary:70000}


    ];
    
//   $scope.callnames = servicee.names(); 
  $scope.calleth   = factoryy.geteth();


});



myApp.factory("factoryy",function(){

     var ethnicity = ["Asian-Indian","Asian-Indian","Chinese","Latino","American"];

     return{

      geteth: function(){

         return ethnicity;
         }
     }

});


// myApp.service("servicee",function(){

//       var names= ["jay","anu","sharon","jose","mary"];
// this.names = function(){
//       return names;
// }


// });

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
 	<title></title>
 </head>
 <body ng-app="app" ng-controller="ctrl" >
 

 <table border="1">
     <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Salary</th>


     </tr>
 	
     <tr ng-repeat="i in person">
         <td>{{i.name |uppercase }}</td>
         <td>{{i.age|agefilter}}</td>
         <td>{{i.salary|currency}}</td>
        

     </tr>



 </table><br><br><br>


  <!--<table border="1">
     <tr><th>Name</th></tr>
 	
     <tr ng-repeat="s in callnames">

         <td>{{s}}</td>
    </tr>
    
 </table>-->



  <table border="1">
     <tr>

         <th>Ethnicity</th>
         
     </tr>
 	
     <tr ng-repeat="e in calleth">

         <td>{{e}}</td>
    </tr>
    
 </table>



 <script src="../js/angu.js"></script>
 </body>
 </html>

Answer 1

因此，为了解决您当前的实施问题，您只需要执行两项操作，首先将控制器中的servicee.names更新为servicee.names()，然后在模板中将s.names更新为只是s

为了与工厂实现相同的功能，您可以这样做：

myApp.factory("nameFactory",function(){
  var names= ["jay","anu","sharon","jose","mary"];

  return {
      getNames: function(){
        return names;
      }
  }
});
myApp.controller("ctrl", function($scope,nameFactory){
  $scope.person=[
     {name:"jay",age:25,salary:85000},
     {name:"anu",age:23,salary:65000},
     {name:"jose",age:26,salary:75000},
  ];

  $scope.callnames = nameFactory.getNames(); 
});

工厂和服务之间的区别在于工厂只是一个返回的函数，因此我们可以返回一个公开我们想要的任何值或函数的对象，同时使用new初始化服务运算符允许我们通过将其附加到this

来简单地公开任何内容

Answer 2

您必须调用控制器中servicee的功能

$scope.callnames = servicee.names();

然后在你的HTML中，

<tr ng-repeat="s in callnames">
     <td>{{s}}</td>
 </tr>

编辑：如果你想使用工厂而不是服务

myApp.factory("myFactory",function(){

    var names= ["jay","anu","sharon","jose","mary"];
    this.names = function(){
          return names;
    }

    return this;

});

然后在你的控制器中，仍然是相同的。

myApp.controller("ctrl", function($scope,myFactory){

    $scope.person=[

        {name:"jay",age:25,salary:85000},
        {name:"anu",age:23,salary:65000},
        {name:"jose",age:26,salary:75000},


    ];

  $scope.callnames = myFactory.names(); 


});

另一个编辑：您的阵列存在2＆＃39;亚洲 - 印度＆＃39;的问题，要解决此问题，您必须在html中添加$ index索引。

<tr ng-repeat="e in calleth track by $index">
     <td>{{e}}</td>
</tr>

Answer 3

// var myApp =angular.module("app",[]);

// myApp.controller("ctrl",function($scope){

// 	$scope.person =
// 	[

//        {name:"john",age:30},
//        {name:"sam",age:20},
//        {name:"jay",age:25}

//     ];
    
//     $scope.title = "Learning Angular"
// })
// _____________________________________________________________________________________
// _____________________________________________________________________________________
// _____________________________________________________________________________________

var myApp = angular.module("app",[]);

myApp.filter("agefilter", function(){

var x= function(age){
    if(age==23){

        return "Young";
    }

    if(age==25){

        return "Mature";
    }
    if(age==26){

        return "Oldest";
    }
}
return x;
});

myApp.controller("ctrl", function($scope,servicee){

    $scope.person=[

       {name:"jay",age:25,salary:85000},
        {name:"anu",age:23,salary:65000},
         {name:"jose",age:26,salary:75000},


    ];
    
  $scope.callnames = servicee.names(); 


});
myApp.service("servicee",function(){

      var names= ["jay","anu","sharon","jose","mary"];
this.names = function(){
      return names;
}


});

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
 	<title></title>
 </head>
 <body ng-app="app" ng-controller="ctrl" >
 

 <table border="1">
     <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Salary</th>


     </tr>
 	
     <tr ng-repeat="i in person">
         <td>{{i.name |uppercase }}</td>
         <td>{{i.age|agefilter}}</td>
         <td>{{i.salary|currency}}</td>
        

     </tr>



 </table> <br><br><br>


  <table border="1">
     <tr>
         <th>Name</th>
         


     </tr>
 	
     <tr ng-repeat="s in callnames">
         <td>{{s}}</td>
         
        

     </tr>



 </table>


 <script src="../js/angu.js"></script>
 </body>
 </html>

使用服务的Angular，display数组

3 个答案: