unable to bind data from angularjs controller

Question

I am trying to bind the data from angular controller but its not bading rather than it's showing expression i have included angular.js in my layout but it's not working below is the code please help me

File name: Home.cshtml

<div class="container" ng-app="home">
<div class="container">
    <div class="panel-group row" ng-controller="Eventapp">
        <div class="panel col-lg-4" ng-repeat="product in products">
            <div class="panel-heading">
                <h3>{{product.heading}}</h3>
            </div>
            <div class="panel-body">
                <ul>
                    <li ng-repeat="content in product.contents">
                        {{content}}
                    </li>
                </ul>
            </div>
            <div class="panel-footer">
                <button class="btn btn-success">contact us</button>
            </div>
        </div>
</div>

Angular controller :Eventappcontroller.js

'use strict';




 var home = angular.module('home', []);
    home.controller('Eventapp', function ($scope) {
        $scope.products = [
            { heading: 'School', Contents: ['Semi-English', 'Semi-English', 'Semi-English'] },
         { heading: 'School', Contents: ['Semi-English', 'Semi-English', 'Semi-English'] },
     { heading: 'School', Contents: ['Semi-English', 'Semi-English', 'Semi-English'] },
     { heading: 'School', Contents: ['Semi-English', 'Semi-English', 'Semi-English'] },
      { heading: 'School', Contents: ['Semi-English', 'Semi-English', 'Semi-English'] }
        ]
    })

Scripts included in layout page bottom ---> before end of body tag

<script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/controller/EventappController.js"></script>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

Output: {{product.heading}} {{content}} Here will be button

What errors are you seeing in the browser error console? Seeing the raw expressions is an indicator that angular or one of your scripts failed to load, for some reason. Also, you are including scripts multiple times, you don't need both the normal and the .min version of scripts at the same time. — Claies
– Claies, Commented Apr 23, 2016 at 14:46

Sampath · Accepted Answer · 2016-04-23 15:35:50Z

0

Firstly check the typo error on your loop here //contect must be content

<li ng-repeat="contect in product.contents"> //contect must be  content
         {{content}}
</li>

If that thing also not work then try as shown below.

Use an array of objects on your Contents array.Like this:

Contents: [{value:'Semi-English'},{value: 'Semi-English'},{value: 'Semi-English'}]

Then within your repeater use like this :

<li ng-repeat="content in product.contents">
       {{content.value}}
</li>

answered Apr 23, 2016 at 15:35

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavan Over a year ago

Thank you to identify typo error. I tried suggested changes but it's not working Problem is also persist for header

luckyqiao · Accepted Answer · 2016-04-23 15:38:12Z

I cant't find any error from your code. There is a jsfiddle that works:

'use strict';
var home = angular.module('home', []);

home.controller('Eventapp', ['$scope',
  function($scope) {
    $scope.products = [{
      heading: 'School',
      Contents: ['Semi-English', 'Semi-English', 'Semi-English']
    }, {
      heading: 'School',
      Contents: ['Semi-English', 'Semi-English', 'Semi-English']
    }, {
      heading: 'School',
      Contents: ['Semi-English', 'Semi-English', 'Semi-English']
    }, {
      heading: 'School',
      Contents: ['Semi-English', 'Semi-English', 'Semi-English']
    }, {
      heading: 'School',
      Contents: ['Semi-English', 'Semi-English', 'Semi-English']
    }];
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="home">
  <div class="container">
    <div class="panel-group row" ng-controller="Eventapp">
      <div class="panel col-lg-4" ng-repeat="product in products">
        <div class="panel-heading">
          <h3>{{product.heading}}</h3>
        </div>
        <div class="panel-body">
          <ul>
            <li ng-repeat="contect in product.contents">
              {{content}}
            </li>
          </ul>
        </div>
        <div class="panel-footer">
          <button class="btn btn-success">contact us</button>
        </div>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

unable to bind data from angularjs controller

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related