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

任何人都可以幫助我嗎？我怎樣才能使我的代碼與第二種方法一起工作？

來源

2016-02-26 Hamed Minaee

您必須將其添加到$ 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>

來源

2016-02-26 03:43:54 PCalouche

在有角的，需要被連接到控制器或者作爲「這」或「$範圍」要在視圖層訪問的任何值。

您設置「sharedService.list」等於價值，但是這不適用於視圖，因此「名單」將在您的ng-repeat不確定的。

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

，然後定義您的列表作爲。

來源

2016-02-26 03:12:35 kondrak

因此，我認爲這些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>

來源

2016-02-26 03:47:42

NG重複不與服務定義

回答

相關問題