无法从 angularjs 控制器绑定数据答案

【问题标题】：unable to bind data from angularjs controller无法从 angularjs 控制器绑定数据
【发布时间】：2016-04-23 14:34:15
【问题描述】：

我正在尝试绑定来自角度控制器的数据，但它不是坏的，而不是显示表达式我在我的布局中包含了 angular.js，但它在下面不起作用是代码请帮助我

文件名：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>

角度控制器：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'] }
        ]
    })

布局页面底部包含的脚本 ---> 在正文标记结束之前

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

输出： {{product.heading}} {{内容}} 这里将是按钮

【问题讨论】：

您在浏览器错误控制台中看到了哪些错误？看到原始表达式表明 angular 或您的一个脚本由于某种原因未能加载。此外，您多次包含脚本，您不需要同时使用普通和.min 版本的脚本。

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

首先在此处检查循环中的拼写错误//contect must be content

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

如果那个东西也不起作用，那么尝试如下所示。

在 Contents 数组上使用对象数组。像这样：

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

然后在你的中继器中像这样使用：

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

【讨论】：

感谢您发现拼写错误。我尝试了建议的更改，但它不起作用问题也持续存在于标题

【解决方案2】：

我在您的代码中找不到任何错误。有一个 jsfiddle 可以工作：

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

【讨论】：