CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
Pavan
Pavan

Reputation: 337

unable to bind data from angularjs controller

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

Upvotes: 2

Views: 224

Answers (2)

luckyqiao
luckyqiao

Reputation: 52

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>

Upvotes: 0

Sampath
Sampath

Reputation: 65978

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>

Upvotes: 0

Related Questions