angular js应用程序不工作
angular js app not working
这是我第一次尝试angular。我使用angular创建了一个应用程序,但它似乎无法加载。有人能看看我的代码,看看我是否遗漏了一些简单的东西。谢谢Greg
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset=utf-8 />
<title>Angular JS Demo</title>
</head>
<body ng-controller="ctrl">
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
function ctrl($scope){
$scope.rows = ['Paul','John','Lucie'];
$scope.temp = false;
$scope.addRow = function(){
$scope.temp = false;
$scope.addName="";
};
$scope.deleteRow = function(row){
$scope.rows.splice($scope.rows.indexOf(row),1);
};
$scope.plural = function (tab){
return tab.length > 1 ? 's': '';
};
$scope.addTemp = function(){
if($scope.temp) $scope.rows.pop();
else if($scope.addName) $scope.temp = true;
if($scope.addName) $scope.rows.push($scope.addName);
else $scope.temp = false;
};
$scope.isTemp = function(i){
return i==$scope.rows.length-1 && $scope.temp;
};
}
</script>
<h2>{{rows.length}} Friend{{plural(rows)}} <span ng-show="temp">?<small class="muted"><em > (only {{rows.length-1}} actually....)</em></small></span> </h2>
<form class="form-horizontal">
<span ng-class="{'input-append':addName}">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" ng-change="addTemp()"/>
<input type="submit" class="btn btn-primary" ng-click="addRow()" ng-show="addName" value="+ add"/>
</span>
<span class="search input-prepend" ng-class="{'input-append':search}">
<span class="add-on"><i class="icon-search"></i></span>
<input type="text" class="span2" placeholder="Search" ng-model="search">
<button type="submit" class="btn btn-inverse" ng-click="search=''" ng-show="search" value="+ add"><i class="icon-remove icon-white"></i></button>
</span>
</form>
<table class="table table-striped">
<tr ng-repeat="row in rows | filter : search" ng-class="{'muted':isTemp($index)}">
<td>{{$index+1}}</td>
<td>{{row}}</td>
<td>
<button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng- hide="isTemp($index)"><i class="icon-trash icon-white"></i></button>
</td>
</tr>
</table>
</body>
</html>
您忘记向应用程序声明控制器在代码末尾添加:
myApp.controller('ctrl', ctrl);
这是您的代码的工作副本:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset=utf-8 />
<title>Angular JS Demo</title>
</head>
<body ng-controller="ctrl">
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
function ctrl($scope){
$scope.rows = ['Paul','John','Lucie'];
$scope.temp = false;
$scope.addRow = function(){
$scope.temp = false;
$scope.addName="";
};
$scope.deleteRow = function(row){
$scope.rows.splice($scope.rows.indexOf(row),1);
};
$scope.plural = function (tab){
return tab.length > 1 ? 's': '';
};
$scope.addTemp = function(){
if($scope.temp) $scope.rows.pop();
else if($scope.addName) $scope.temp = true;
if($scope.addName) $scope.rows.push($scope.addName);
else $scope.temp = false;
};
$scope.isTemp = function(i){
return i==$scope.rows.length-1 && $scope.temp;
};
}
myApp.controller('ctrl',ctrl);
</script>
<h2>{{rows.length}} Friend{{plural(rows)}} <span ng-show="temp">?<small class="muted"><em > (only {{rows.length-1}} actually....)</em></small></span> </h2>
<form class="form-horizontal">
<span ng-class="{'input-append':addName}">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" ng-change="addTemp()"/>
<input type="submit" class="btn btn-primary" ng-click="addRow()" ng-show="addName" value="+ add"/>
</span>
<span class="search input-prepend" ng-class="{'input-append':search}">
<span class="add-on"><i class="icon-search"></i></span>
<input type="text" class="span2" placeholder="Search" ng-model="search">
<button type="submit" class="btn btn-inverse" ng-click="search=''" ng-show="search" value="+ add"><i class="icon-remove icon-white"></i></button>
</span>
</form>
<table class="table table-striped">
<tr ng-repeat="row in rows | filter : search" ng-class="{'muted':isTemp($index)}">
<td>{{$index+1}}</td>
<td>{{row}}</td>
<td>
<button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng- hide="isTemp($index)"><i class="icon-trash icon-white"></i></button>
</td>
</tr>
</table>
</body>
</html>
问题是您忘记在应用程序中声明控制器。
相关文章:
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- firefox插件:退出不工作的应用程序观察器
- 为什么Turbolinks不能正常工作?Rails应用程序
- 谷歌表单-根据分配给谷歌应用程序的工作为商业用户预先填充多项选择列表
- angular js应用程序不工作
- 应用程序在“关闭”之后停止工作(控制台中没有错误);咕哝的构造”;
- 只需添加一个'允许跨来源请求'到我的节点应用程序工作
- 我应该将哪些数据传递给 Spotify 应用程序才能使分页工作
- 如何让应用程序帮助程序方法在发送的请求为 JS 格式时工作
- 最基本的 Angular 应用程序无法正常工作
- WebSocket 应用程序在部署在 Tomcat8 服务器上时无法正常工作
- 离子应用程序在浏览器上运行,但在我的安卓设备中无法正常工作
- 谷歌应用程序脚本-正在尝试使用getUrl.TypeError:在对象工作表中找不到函数getUrl
- cyrillic单词的Regexp不'无法在应用程序中工作
- 提示不在谷歌应用程序脚本中工作
- 为什么我的UI应用程序嵌套在引导模式中时无法工作
- Javascript和jQuery在Grails应用程序中停止工作
- 我的javascript问答应用程序;工作不正常
- 如何在ExtJS中构建无需鼠标即可工作的应用程序
- Backbone.js应用程序使用CommonJS结构与node.js和客户端协同工作