CODEWITHSUNDEEP
javascriptangularjsdata-binding
sagi
sagi

Reputation: 40471

AngularJS Binding doesn't seem to work

I'm fairly new to Angular, and a simple binding doesn't work for me.

It just shows me {{ trip.name }} and {{trip.created}} just as they're written.

My controller:

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

A part of my class:

@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>

the view of the controller:

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

BTW - supposedly according to the course I'm following, I don't need ['ngSanitize'] yet, but without it it doesn't even show the DIVs.

EDIT: as @jellyraptor noticed , I had a typo with = instead of :

EDIT 2 :

It was the typo + the [ngSanitize] which I really didn't needed. I fixed the typo and passed an empty array and everything works. Thanks all

Upvotes: 0

Views: 405

Answers (3)

JellyRaptor
JellyRaptor

Reputation: 755

You put an equals sign in your trips array's second object's 'created' attribute.

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

should be

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

Upvotes: 1

Hadi
Hadi

Reputation: 17289

Because you are using controllerAs syntax and here the variable is vm. so for access scope object use vm instead of 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>

Upvotes: 1

JC Ford
JC Ford

Reputation: 7066

Either Angular isn't loading or it is encountering an error. Bring up the dev tools with F12 and see if there are errors in the console. Also in the console, you can type 'angular' and hit enter and if it reports that angular is undefined then angular is not loading properly.

Upvotes: 1

Related Questions