角度静态JSON列表不会呈现

Angular static JSON list wont render

本文关键字：列表 静态 JSON      更新时间：2023-09-26

很抱歉打扰。。。但我脸色发青，窒息而死。

好的，我使用eclipse和相关的angular插件来编辑一个简单的列表示例，如下所示，但它拒绝在预览时显示，也拒绝在eclipse中使用浏览器打开时显示。

这本书是按原样键入的。。。除了双引号和单引号。。。eclipse插件的反应与这些不同。。。但我不知道为什么，也不知道这些引文的优先顺序是什么。它似乎更喜欢单引号。

无论如何，这个JSON列表不会显示。

有什么建议吗？感谢

<script>
    alert ('inside js');
    var myModule.controller('AppCtrl', function($scope) { });
    myModule.controller('AppCtrl', function($scope) {
        $scope.stories = [
            {title:'Story 00', description:'Description pending.'},
            {title:'Story 01', description:'Description pending.'},
            {title:'Story 02', description:'Description pending.'},
            {title:'Story 03', description:'Description pending.'},
            {title:'Story 04', description:'Description pending.'},
            {title:'Story 05', description:'Description pending.'}
            ];
        });
</script>


<div ng-controller='AppCtrl'>
    <div class='span4 sidebar-content'>
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>
<script type="text/javascript" 
      src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>

问题是您没有创建一个角度模块，也没有引导该模块，并且由于某种原因，控制器声明重复。这是一个具有这些校正的工作示例：

// declare an angular module
angular.module('myApp', [])
// attach controller
.controller('AppCtrl', function($scope) {
  $scope.stories = [
    {title:'Story 00', description:'Description pending.'},
    {title:'Story 01', description:'Description pending.'}
  ];
})
;

标记：

<!-- bootstrap the angular module and add controller to element -->
<div ng-app="myApp" ng-controller='AppCtrl'>
    <div class='span4 sidebar-content'>
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>

现场演示

你可以将模块缓存到一个变量中，但我认为没有必要这样做。Angular已经是一个全局变量了——我建议使用它的内部模块系统来存储和获取对模块的引用，而不是制作更多的全局变量。

// make a module
angular.module('myModuleName', [
 // array of dependencies
]);
// get a module
angular.module('myModuleName')
// add a controller to the module
.controller('myCtrl', function() { //etc

而不是：

var myModule = angular.module('myModuleName', []);
myModule.controller(function() {

在这次尝试中，您在HTML中错过了ng控制器和ng应用程序这是正在工作的jsbinhttp://jsbin.com/qeninogakeji/1/edit

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appViewModule">
  
    <div class='span4 sidebar-content' ng-controller="AppViewController">
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>
<script>
var appViewModule = angular.module('appViewModule', []);
    appViewModule.controller('AppViewController', function($scope) {
      
        $scope.stories = [
            {'title':'Story 00', 'description':'Description pending.'},
            {'title':'Story 01', 'description':'Description pending.'},
            {'title':'Story 02', 'description':'Description pending.'},
            {'title':'Story 03', 'description':'Description pending.'},
            {'title':'Story 04', 'description':'Description pending.'},
            {'title':'Story 05', 'description':'Description pending.'}
            ];
        });
</script>

相关文章：