AngularJSバインディングが機能していないようです。

Question

私はAngularをかなり新しくしています。単純なバインディングは私のためには機能しません。

ちょうど彼らが書かれている通り私は​​と{{trip.created}}を表示します。

マイコントローラ：

(function() { 
    "use strict"; 
    angular.module("app-trips") 
     .controller("tripsController", tripsController); 

    function tripsController() { 
     var vm = this; 
     vm.trips = [{ 
      name: "US Trip", 
      created: new Date() 
     }, { 
      name: "World Trip", 
      created = new Date() 
     }]; 

私のクラスの一部：

@section Scripts { 
    <script src="~/lib/angular/angular.min.js"></script> 
    <script src="~/js/app-trips.js"></script> 
    <script src="~/js/tripsController.js"></script> 
} 
<div class="row" ng-app="app-trips"> 

    <div ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3"> 
     <table class="table table-responsive table-striped"> 
      <tr ng-repeat="trip in vm.trips"> 
       <td>{{ trip.name }}</td> 
       <td>{{ trip.created }}</td> 
      </tr> 
     </table> 
    </div> 

コントローラのビュー：BTW

(function() { 
    "use strict"; 
    angular.module("app-trips", ['ngSanitize']); 
})(); 

- おそらく私はもちろんに従って私はまだ['ngSanitize']は必要ありませんが、それがなければDIVが表示されません。

EDIT：@jellyraptorが気づいたように、私は=の代わりにタイプミスがあった：

EDIT 2：

それはタイプミスでし+ [ngSanitize]私は本当になかったです必要です。私はタイプミスを修正し、空の配列を渡し、すべての作品。ありがとうすべて

Answer 1

controllerAsの構文を使用しているため、変数はvmです。したがって、アクセス・スコープ・オブジェクト使用vmための代わりtripsController

<tr ng-repeat="trip in vm.trips"> 
    <td>{{ trip.name }}</td> 
    <td>{{ trip.created }}</td> 
</tr> 

(function() { 
 
    "use strict"; 
 
    angular.module("app-trips", []); 
 
})(); 
 

 
    angular.module("app-trips") 
 
    .controller("tripsController", tripsController); 
 

 
    function tripsController() { 
 
    var vm = this; 
 
    vm.trips = [{ 
 
     name: "US Trip", 
 
     created: new Date() 
 
    }, { 
 
     name: "World Trip", 
 
     created: new Date() 
 
    }]; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> 
 
<div ng-app="app-trips" ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3"> 
 
    <table class="table table-responsive table-striped"> 
 
    <tr ng-repeat="trip in vm.trips"> 
 
     <td>{{ trip.name }}</td> 
 
     <td>{{ trip.created }}</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

のいずれかの角度がロードされていないか、エラーが発生しています。 F12を使用して開発ツールを起動し、コンソールにエラーがないかどうかを確認します。また、コンソールでは、 'angular'と入力してEnterを押すと、角度が定義されていないと報告された場合、角度が正しく読み込まれません。

Answer 3

トリップアレイの2番目のオブジェクトの 'created'属性に等号を付けます。

vm.trips = [{ 
    name: "US Trip", 
    created: new Date() 
}, { 
    name: "World Trip", 
    created = new Date() 
}]; 

これは推測です

vm.trips = [{ 
    name: "US Trip", 
    created: new Date() 
}, { 
    name: "World Trip", 
    created: new Date() 
}];