Javascript 简单的角度示例不起作用_Javascript_Angularjs_Twitter Bootstrap

Javascript 简单的角度示例不起作用

javascript angularjs twitter-bootstrap

Javascript 简单的角度示例不起作用,javascript,angularjs,twitter-bootstrap,Javascript,Angularjs,Twitter Bootstrap,我复制了，但它不起作用。我不明白为什么。看起来它应该工作得很好。我做错了什么以下是角度JS： angular.module('myApp', []).controller('thingsCtrl', function($scope) { $scope.things = [ {title: 'my title 1', content: 'my Content 1'}, title: 'my title 2', content: 'my Content

我复制了，但它不起作用。我不明白为什么。看起来它应该工作得很好。我做错了什么

以下是角度JS：

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
    $scope.things = [
       {title: 'my title 1', content: 'my Content 1'},  
        title: 'my title 2', content: 'my Content 2'}, 
        title: 'my title 3', content: 'my Content 3'}, 
        title: 'my title 4', content: 'my Content 4'},  
        title: 'my title 5', content: 'my Content 5'},
        title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
       {title: 'my 2nd title 1', content: 'my Content 1'},  
        title: 'my 2nd title 2', content: 'my Content 2'}, 
        title: 'my 2nd title 3', content: 'my Content 3'}, 
        title: 'my 2nd title 4', content: 'my Content 4'},  
        title: 'my 2nd title 5', content: 'my Content 5'},
        title: 'my 2nd title 6', content: 'my Content 6'}
        ];
});

以下是HTML：

    <!DOCTYPE html>
<html>

  <head>

     <!-- CSS  -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- JS  -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  </head>

<body>  

    <div ng-app="myApp" ng-controller="thingsCtrl">
        <h1>Hello Plunker!</h1>



      <div class="container">   
          <div class="row">

            <div class="col-sx-6"><h4>My Subtitle</h4>
                <div ng-repeat="x in things"> 
                    <div class="col-sx-6 col-sm-4 col-md-2">
                  <div class="cube">
                    <b>{{x.title}}</b> </br> {{x.content}}

                  </div>                
                    </div>  
                </div>
            </div>

            <div class="col-sx-6"><h4>My Subtitle</h4>
                <div ng-repeat="x in things2"> 
                    <div class="col-sx-6 col-sm-4 col-md-2">
                  <div class="cube">
                    <b>{{x.title}}</b> </br> {{x.content}}

                  </div>                
                    </div>  
                </div>
            </div>

          </div>
      </div> 

    </div>     

    <script src="script.js"></script>     

      </body>

    </html>


你好，普朗克！
我的字幕
{{x.title}
{{x.content}
我的字幕
{{x.title}
{{x.content}

您在标记中指定了错误的控制器。更新

<div ng-app="myApp" ng-controller="myCtrl">

到

您没有为列表中的每个项目打开另一个键/值数组

    {title: 'my title 2', content: 'my Content 2'}, 
    title: 'my title 3', content: 'my Content 3'},

尝试：

哦，检查控制台错误：

Error: [ng:areq] Argument 'myCtrl' is not a function, got undefined

您的myApp控制器不正确。

我注意到您的对象数组语法不正确，每个对象前面缺少一个大括号

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
  $scope.things = [
   {title: 'my title 1', content: 'my Content 1'},  
    {title: 'my title 2', content: 'my Content 2'}, 
    {title: 'my title 3', content: 'my Content 3'}, 
    {title: 'my title 4', content: 'my Content 4'},  
    {title: 'my title 5', content: 'my Content 5'},
    {title: 'my title 6', content: 'my Content 6'}
    ];

  $scope.things2 = [
   {title: 'my 2nd title 1', content: 'my Content 1'},  
    {title: 'my 2nd title 2', content: 'my Content 2'}, 
    {title: 'my 2nd title 3', content: 'my Content 3'}, 
    {title: 'my 2nd title 4', content: 'my Content 4'},  
    {title: 'my 2nd title 5', content: 'my Content 5'},
    {title: 'my 2nd title 6', content: 'my Content 6'}
    ];
});

您需要告诉依赖项的角度顺序。您希望将

$scope

注入，以便向angular提及。例如，如果我也想注入

$q

，我会将其添加到列表中，例如

.controller（'thingsCtrl'，['$scope'，'$q'，function（$scope，$q）{…}）下面的代码应该可以正常工作
angular.module('myApp', [])
.controller('thingsCtrl', ['$scope', function($scope) {
    $scope.things = [
        {title: 'my title 1', content: 'my Content 1'},  
        {title: 'my title 2', content: 'my Content 2'}, 
        {title: 'my title 3', content: 'my Content 3'}, 
        {title: 'my title 4', content: 'my Content 4'},  
        {title: 'my title 5', content: 'my Content 5'},
        {title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
        {title: 'my 2nd title 1', content: 'my Content 1'},  
        {title: 'my 2nd title 2', content: 'my Content 2'}, 
        {title: 'my 2nd title 3', content: 'my Content 3'}, 
        {title: 'my 2nd title 4', content: 'my Content 4'},  
        {title: 'my 2nd title 5', content: 'my Content 5'},
        {title: 'my 2nd title 6', content: 'my Content 6'}
        ];
}]);

谢谢，doh，我刚才更改了，忘记更改标记了。在plunkr和更高版本中更新，它仍然不起作用。那是因为你的json不正确-你的json中缺少{。这是更新的plunker-明白了，我知道它一定是愚蠢的o.o！谢谢你的帮助。
angular.module('myApp', []).controller('thingsCtrl', function($scope) {
  $scope.things = [
   {title: 'my title 1', content: 'my Content 1'},  
    {title: 'my title 2', content: 'my Content 2'}, 
    {title: 'my title 3', content: 'my Content 3'}, 
    {title: 'my title 4', content: 'my Content 4'},  
    {title: 'my title 5', content: 'my Content 5'},
    {title: 'my title 6', content: 'my Content 6'}
    ];

  $scope.things2 = [
   {title: 'my 2nd title 1', content: 'my Content 1'},  
    {title: 'my 2nd title 2', content: 'my Content 2'}, 
    {title: 'my 2nd title 3', content: 'my Content 3'}, 
    {title: 'my 2nd title 4', content: 'my Content 4'},  
    {title: 'my 2nd title 5', content: 'my Content 5'},
    {title: 'my 2nd title 6', content: 'my Content 6'}
    ];
});

angular.module('myApp', [])
.controller('thingsCtrl', ['$scope', function($scope) {
    $scope.things = [
        {title: 'my title 1', content: 'my Content 1'},  
        {title: 'my title 2', content: 'my Content 2'}, 
        {title: 'my title 3', content: 'my Content 3'}, 
        {title: 'my title 4', content: 'my Content 4'},  
        {title: 'my title 5', content: 'my Content 5'},
        {title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
        {title: 'my 2nd title 1', content: 'my Content 1'},  
        {title: 'my 2nd title 2', content: 'my Content 2'}, 
        {title: 'my 2nd title 3', content: 'my Content 3'}, 
        {title: 'my 2nd title 4', content: 'my Content 4'},  
        {title: 'my 2nd title 5', content: 'my Content 5'},
        {title: 'my 2nd title 6', content: 'my Content 6'}
        ];
}]);