为什么在列表角度JS中没有得到任何项目
Why am not getting any items in list angularJS
通过我的 HTML 应用程序中的控制器动态生成列表菜单，我在控制台中没有看到任何错误，但未生成项目。
.HTML
<div id="toolbaropener">
</div>
<div id="accordion">
<ul>
<li>
<a href="#controlflow">Add new chart</a>
<div id="controlflow" class="accordion">
<div id="menu-container">
</div>
<div plumb-menu-item ng-repeat="x in library | filter : searchCommonValue" class="menu-item" data-identifier="{{x.library_id}}" data-title="{{x.title}}" draggable>
<img class="toolheader" src="{{x.icon}}">
<div class="toolcontent">{{x.title}}</div>
</div>
</div>
</li>
</ul>
</div>
我已经定义了控制器何时获得路由器，即View.Html
controller: 'mainController'
应用.js
var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'view.html',
controller: 'mainController'
})
});
routerApp.controller('mainController',['$scope','$http',function(scope,http){
function module(library_id, schema_id, title, description, x, y, icon,variables) {
this.library_id = library_id;
this.schema_id = schema_id;
this.title = title;
this.description = description;
this.x = x;
this.y = y;
this.icon = icon;
}
scope.library = [];
scope.library_uuid = 0;
scope.schema = [];
scope.schema_uuid = 0;
scope.library_topleft = {
x: 15,
y: 145,
item_height: 50,
margin: 5
};
scope.module_css = {
width: 150,
height: 100 // actually variable
};
scope.redraw = function() {
console.log("-- Redraw function executed");
scope.schema_uuid = 0;
jsPlumb.detachEveryConnection();
scope.schema = [];
scope.library = [];
scope.addModuleToLibrary("DoWhile", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Add-fav-icon.png",
{
"Control": {
"Name": "DoWhile",
"Icon": "Blah",
"Variables": [
{
"Key": "GUUserID",
"Value": 4544314512
},
{
"Key": "Username",
"Value": "test"
}
]
}
});
scope.addModuleToLibrary("ForEach<T>", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Chat-icon.png",
{
"Control": {
"Name": "ForEach",
"Icon": "Blah",
"Variables": [
{
"Key": "Password",
"Value": "fdfgdfgdfg"
},
{
"Key": "Surname",
"Value": "blah blah"
}
]
}
});
};
// add a module to the library
scope.addModuleToLibrary = function(title, description, posX, posY,icon,variables) {
console.log("Add module " + title + " to library, at position " + posX + "," + posY+", variables: "+variables);
var library_id = scope.library_uuid++;
var schema_id = -1;
var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
scope.library.push(m);
};
// add a module to the schema
scope.addModuleToSchema = function(library_id, posX, posY) {
console.log("Add module " + title + " to schema, at position " + posX + "," + posY);
var schema_id = scope.schema_uuid++;
var title = "";
var description = "Likewise unknown";
var icon = "";
var variables = "";
for (var i = 0; i < scope.library.length; i++) {
if (scope.library[i].library_id == library_id) {
title = scope.library[i].title;
description = scope.library[i].description;
icon = scope.library[i].icon;
variables = scope.library[i].variables; console.log("Selected control variables : " + variables);
}
}
var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
scope.schema.push(m);
};
scope.removeState = function(schema_id) {
console.log("Remove state " + schema_id + " in array of length " + scope.schema.length);
for (var i = 0; i < scope.schema.length; i++) {
// compare in non-strict manner
if (scope.schema[i].schema_id == schema_id) {
console.log("Remove state at position " + i);
scope.schema.splice(i, 1);
}
}
};
}]);
看起来你从不在控制器中调用scope.redraw（）来启动数据。
下面是我使用您的代码使其工作的示例。我不熟悉AngularUI路由器，而是使用ngRoute。
索引.html
<!doctype html>
<html ng-app="DiginRt">
<head>
<title>Test Angular</title>
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
</html>
查看.html
<div id="toolbaropener">
</div>
<div id="accordion">
<ul>
<li>
<a href="#controlflow">Add new chart</a>
<div id="controlflow" class="accordion">
<div id="menu-container">
</div>
<div plumb-menu-item ng-repeat="x in library | filter : searchCommonValue" class="menu-item" data-identifier="{{x.library_id}}" data-title="{{x.title}}" draggable>
<img class="toolheader" src="{{x.icon}}">
<div class="toolcontent">{{x.title}}</div>
</div>
</div>
</li>
</ul>
</div>
应用.js
var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ngRoute']);
routerApp.config(function($routeProvider) {
$routeProvider
.when('/dashboard', {
//url: '/dashboard',
templateUrl: 'view.html',
controller: 'mainController'
})
.otherwise('/dashboard');
});
routerApp.controller('mainController',['$scope','$http',function(scope,http){
function module(library_id, schema_id, title, description, x, y, icon,variables) {
this.library_id = library_id;
this.schema_id = schema_id;
this.title = title;
this.description = description;
this.x = x;
this.y = y;
this.icon = icon;
}
scope.library = [];
scope.library_uuid = 0;
scope.schema = [];
scope.schema_uuid = 0;
scope.library_topleft = {
x: 15,
y: 145,
item_height: 50,
margin: 5
};
scope.module_css = {
width: 150,
height: 100 // actually variable
};
scope.redraw = function() {
console.log("-- Redraw function executed");
scope.schema_uuid = 0;
//jsPlumb.detachEveryConnection();
scope.schema = [];
scope.library = [];
scope.addModuleToLibrary("DoWhile", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Add-fav-icon.png",
{
"Control": {
"Name": "DoWhile",
"Icon": "Blah",
"Variables": [
{
"Key": "GUUserID",
"Value": 4544314512
},
{
"Key": "Username",
"Value": "test"
}
]
}
});
scope.addModuleToLibrary("ForEach<T>", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Chat-icon.png",
{
"Control": {
"Name": "ForEach",
"Icon": "Blah",
"Variables": [
{
"Key": "Password",
"Value": "fdfgdfgdfg"
},
{
"Key": "Surname",
"Value": "blah blah"
}
]
}
});
};
// add a module to the library
scope.addModuleToLibrary = function(title, description, posX, posY,icon,variables) {
console.log("Add module " + title + " to library, at position " + posX + "," + posY+", variables: "+variables);
var library_id = scope.library_uuid++;
var schema_id = -1;
var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
scope.library.push(m);
};
// add a module to the schema
scope.addModuleToSchema = function(library_id, posX, posY) {
console.log("Add module " + title + " to schema, at position " + posX + "," + posY);
var schema_id = scope.schema_uuid++;
var title = "";
var description = "Likewise unknown";
var icon = "";
var variables = "";
for (var i = 0; i < scope.library.length; i++) {
if (scope.library[i].library_id == library_id) {
title = scope.library[i].title;
description = scope.library[i].description;
icon = scope.library[i].icon;
variables = scope.library[i].variables; console.log("Selected control variables : " + variables);
}
}
var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
scope.schema.push(m);
};
scope.removeState = function(schema_id) {
console.log("Remove state " + schema_id + " in array of length " + scope.schema.length);
for (var i = 0; i < scope.schema.length; i++) {
// compare in non-strict manner
if (scope.schema[i].schema_id == schema_id) {
console.log("Remove state at position " + i);
scope.schema.splice(i, 1);
}
}
};
scope.redraw();
}]);
相关文章：
- Jquery自动完成:如果没有选择任何项目，则使tab键选择第一个项目
- AngularJs/GitHub :如何在没有任何历史记录的情况下将角度种子克隆到我的新项目中
- 我的Javascript项目正在访问网络摄像头，但没有显示任何内容
- 在数组中有任何项目之前，先查找ng重复模板中的元素数
- 如何在mongodb的边界框中获取任何项目(点，线字符串，多边形）
- 清除搜索词，并在选择任何项目后重新加载 Select2 输入的所有项目
- 单击表中的任何项目，都将该值放在隐藏的输入上
- 为什么在列表角度JS中没有得到任何项目
- JavaScript 没有对我的任何项目进行执行
- 不要重复 math.random 中的任何项目
- 比较两个数组并返回一个新数组，其中包含仅在其中一个原始数组中找到的任何项目
- 如何以任何给定的方式在组合框中显示项目
- 是否有任何Web框架或项目提供“;墙”;类似的功能
- 当我点击这个树的任何项目时，如何创建一个弹出窗口
- 当用户点击时，如何关闭Bootstrap弹出窗口(或任何项目）
- 无法从Select2中选择任何项目
- 我如何从json数据中删除任何项目
- 当用户点击离子项目中的任何项目时，打开新页面
- 当我们从下拉列表中选择任何项目时，如何在类似Facebook的文本框中显示文本
- 调用Facebook共享代码从php一旦用户评价任何项目
