角度控制器不顯示對象數組數據

這不顯示數據，我正在學習控制器。爲什麼在顯示我正在觀看的視頻中的數據時它不顯示數據。角度控制器不顯示對象數組數據

<div data-ng-controller="FirstController"> 
<input type="text" name="txtName" data-ng-model="typedName" /> 
<br /> 
Typed Name is: {{ typedName }} 
<br /> 
Names: 
<ul > 
    <li data-ng-repeat="person in Customers | orderBy:'name' | filter:typedName "> {{ person.name | uppercase}} - {{ person.city }} 
    </li> 
</ul> 
</div> 
<script> 
    function FirstController($scope) { 
     $scope.Customers = [ 
      { name: 'Sita', city: 'Los Angeles' }, 
      { name: 'Ram', city: 'Los Vegas' }, 
      { name: 'Amit', city: 'San Antonio' }, 
      { name: 'Cat', city: 'Arkanas' }, 
      { name: 'Boushick', city: 'Pittsburgh' } 
     ]; 
    } 
</script> 
<script src="Scripts/angular.min.js"></script>

來源

2015-04-03 Learner

你看上去以下舊的視頻，以便他們mmight使用角1.2。

在angular的最新版本中，必須指定特定的應用程序名稱並在這些模塊下聲明控制器。儘管您可以通過config激活全局控制器功能，但不建議使用它。

所以，你需要做以下修改：

在你的HTML，

<html data-ng-app="myApp">

現在在你的JS的控制器：

angular.module("myApp", []) 
    .controller("ControllerName", function($scope) { 
     // declare your $scope data here 
    })

爲什麼全局控制器功能已被棄用？

當您在全局聲明控制器函數時，它將污染全局命名空間。假設有另一個使用相同函數名的庫，那麼你的函數將被重寫。

例如，

你有功能SimpleController在您的文件。假設你正在使用一些第三方庫，它們也使用相同的名稱來實現某些功能。

他們成立，

window.SimpleController = window.alert

因此，這意味着你的控制器功能已被覆蓋。

這就是爲什麼它已被棄用。

來源

2015-04-03 03:11:16 mohamedrias

謝謝，你看起來夠公平，其2年的視頻。在視頻29.00，他們使用相同的代碼，但沒有模塊它的工作。也許它的1。2版....但奇怪的是，我使用1.3最新的，它應該向後兼容....足夠公平，現在強制....非常感謝您指出的推理.... https：// www .youtube.com/watch？v = i9MHigUZKEM – Learner 2015-04-03 03:13:17

您可以通過在'config'方法中添加allowGlobals來使其兼容。但最好避免這就是爲什麼不推薦 – mohamedrias 2015-04-03 03:15:03

非常感謝，幫助我理解它。 – Learner 2015-04-03 03:19:08

從你的代碼提供的，我相信它不工作，因爲你還沒有宣佈在JavaScript中的Angular Module並通過ng-app它鏈接到你的HTML視圖。請檢查下面的工作Plunker。

http://plnkr.co/edit/fwwzZwODfZ9G5Ml1Y1MS?p=preview

<body ng-app="myApp"> 
    <div ng-controller="FirstController"> 
     <input type="text" name="txtName" ng-model="typedName" /> 
     <br /> 
     Typed Name is: {{ typedName }} 
     <br /> 
     Names: 
     <ul> 
      <li data-ng-repeat="person in Customers | orderBy:'name' | filter:typedName "> 
       {{ person.name | uppercase}} - {{ person.city }} 
      </li> 
     </ul> 
    </div> 
    <script> 
     angular.module('myApp', []) 
      .controller('FirstController', function($scope) { 
       $scope.Customers = [ 
        { name: 'Sita', city: 'Los Angeles' }, 
        { name: 'Ram', city: 'Los Vegas' }, 
        { name: 'Amit', city: 'San Antonio' }, 
        { name: 'Cat', city: 'Arkanas' }, 
        { name: 'Boushick', city: 'Pittsburgh' } 
       ]; 
      }); 
    </script> 
</body>

來源

2015-04-03 03:08:09

謝謝，他在視頻中的下一部分講解模塊。但是，他從未使用過模塊，您可以在29.00時間快速查看視頻。這對他來說是完美的... https://www.youtube.com/watch?v=i9MHigUZKEM – Learner 2015-04-03 03:11:12

我很好奇爲什麼它爲他工作，而我有完全相同的代碼是不適合我的。你能否指出所有的區別？ – Learner 2015-04-03 03:11:42

@Deevinee Angular改變了控制器在1.2和1.3之間的工作方式，查看更多細節https://docs.angularjs.org/guide/migration – 2015-04-03 03:14:52

角度控制器不顯示對象數組數據

回答

相關問題