NG重复不与服务定义

问题描述：

我新的角度，我试图了解名单的工作，我有一个表，我尝试用一个数组，我必须补充它：NG重复不与服务定义

<table ng-controller="repeatTest"> 
     <tr> 
      <td>name</td> 
      <td>family name</td> 
      <td>score</td> 
     </tr> 
     <tr ng-repeat="item in list"> 
      <td>{{ item.name }}</td> 
      <td>{{ item.familyName }}</td> 
      <td>{{ item.score }}</td> 

     </tr> 


    </table>

和我的javascript代码如下：

app.controller('repeatTest', function($scope, sharedService) { 
$scope.list = [ { 
    name : 'hamed', 
    familyName : 'Minaee', 
    score : '100' 
}, { 
    name : 'hamed', 
    familyName : 'Minaee', 
    score : '100' 
} ]; 
});

这工作完全正常，但是当我使用的服务来保持他阵列，我有表不渲染，这里是我用不工作的JavaScript ：

app.service('sharedService', function() { 
this.list = [ ]; 
    }); 

app.controller('repeatTest', function($scope, sharedService) { 
    sharedService.list = [ { 
    name : 'ddd', 
    familyName : 'sss', 
    score : '100' 
}, { 
    name : 'www', 
    familyName : 'aaa', 
    score : '100' 
} ]; 
});

任何人都可以帮助我吗？我怎样才能使我的代码与第二种方法一起工作？

答

您必须将其添加到$ scope。服务通常是在进行AJAX调用。看到这个Plunker的工作例如：http://plnkr.co/edit/Yx6GYqnSLTzGD2TfB2p8?p=info

var app = angular.module("app", []); 

app.service('sharedService', function() { 
    this.list = [{ 
     name: 'ddd', 
     familyName: 'sss', 
    score: '100' 
    }, { 
     name: 'www', 
     familyName: 'aaa', 
     score: '100' 
    }]; 
}); 

app.controller('repeatTest', function($scope, sharedService) { 
    $scope.list = sharedService.list ; 
});

和HTML

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js" data-require="[email protected]" data-semver="1.5.0"></script> 
    <link href="style.css" rel="stylesheet" /> 
    <script src="script.js"></script> 
</head> 

<body ng-app="app"> 
    <table ng-controller="repeatTest"> 
    <tr> 
     <td>name</td> 
     <td>family name</td> 
     <td>score</td> 
    </tr> 
    <tr ng-repeat="item in list"> 
     <td>{{item.name}}</td> 
     <td>{{item.familyName}}</td> 
     <td>{{item.score}}</td> 
    </tr> 
</table> 
</body> 

</html>

答

在有角的，需要被连接到控制器或者作为“这”或“$范围”要在视图层访问的任何值。

您设置“sharedService.list”等于价值，但是这不适用于视图，因此“名单”将在您的ng-repeat不确定的。

你想要在你的控制器做的是：在你的服务
this.list = [...some list here...];：
$scope.list = sharedService.list

，然后定义您的列表作为。

因此，我认为这些snenarios没有任何意义，使用服务我是对的吗？ –

这是非常正确的，但如果你可以想象从AJAX调用（使用$ http）创建数组，它实际上会非常有用。您使用的方法在创建原型时非常有用，因为您不必让服务器端数据提供程序显示包含数据的页面。 – kondrak

提供模拟模拟与蹲跳或小提琴或codepen或jsbin与答案一起将有助于您更好的答案。好的回答值得赞赏。保持。 –

答

app.service('sharedService', function(){ 
    this.list = [ { 
      name : 'ddd', 
      familyName : 'sss', 
      score : '100' 
      }, { 
      name : 'www', 
      familyName : 'aaa', 
      score : '100' 
     } ]; 
    }); 

    app.controller('repeatTest', function($scope, sharedService){ 
    $scope.list = sharedService.list; 
    });

简单的方法是在service定义数据，并使用该服务controller和使用$scope数据绑定。

<table ng-controller="repeatTest"> 
     <tr> 
      <td>name</td> 
      <td>family name</td> 
      <td>score</td> 
     </tr> 
     <tr ng-repeat="item in list"> 
      <td>{{ item.name }}</td> 
      <td>{{ item.familyName }}</td> 
      <td>{{ item.score }}</td> 

     </tr> 

    </table>

NG重复不与服务定义

相关推荐