Javascript angular js应用程序不工作_Javascript_Angularjs

Javascript angular js应用程序不工作

javascript angularjs

Javascript angular js应用程序不工作,javascript,angularjs,Javascript,Angularjs,这是我第一次尝试。我用angular创建了一个应用程序，但它似乎没有加载。有人可以看看我的代码，看看我是否遗漏了一些简单的东西。谢谢格雷格 <!DOCTYPE html> <html ng-app='myApp'> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <meta cha

这是我第一次尝试。我用angular创建了一个应用程序，但它似乎没有加载。有人可以看看我的代码，看看我是否遗漏了一些简单的东西。谢谢格雷格

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


角度JS演示
var myApp=angular.module（'myApp'，[]）；
函数ctrl（$scope）{
$scope.rows=['Paul'，'John'，'Lucie']；
$scope.temp=false；
$scope.addRow=函数（）{
$scope.temp=false；
$scope.addName=“”；
};
$scope.deleteRow=函数（行）{
$scope.rows.splice（$scope.rows.indexOf（row），1）；
};
$scope.plural=函数（选项卡）{
return tab.length>1？'s'：''；
};
$scope.addTemp=函数（）{
if（$scope.temp）$scope.rows.pop（）；
如果（$scope.addName）$scope.temp=true，则为else；
if（$scope.addName）$scope.rows.push（$scope.addName）；
else$scope.temp=false；
};
$scope.isTemp=函数（i）{
返回i==$scope.rows.length-1&&$scope.temp；
};
}
{{rows.length}}朋友{{{复数（rows）}}？（实际上只有{{rows.length-1}}}
{{$index+1}}
{{row}}

您忘了向应用程序声明控制器在代码末尾添加：

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>


角度JS演示
var myApp=angular.module（'myApp'，[]）；
函数ctrl（$scope）{
$scope.rows=['Paul'，'John'，'Lucie']；
$scope.temp=false；
$scope.addRow=函数（）{
$scope.temp=false；
$scope.addName=“”；
};
$scope.deleteRow=函数（行）{
$scope.rows.splice（$scope.rows.indexOf（row），1）；
};
$scope.plural=函数（选项卡）{
return tab.length>1？'s'：''；
};
$scope.addTemp=函数（）{
if（$scope.temp）$scope.rows.pop（）；
如果（$scope.addName）$scope.temp=true，则为else；
if（$scope.addName）$scope.rows.push（$scope.addName）；
else$scope.temp=false；
};
$scope.isTemp=函数（i）{
返回i==$scope.rows.length-1&&$scope.temp；
};
}
myApp.controller（'ctrl'，ctrl'）；
{{rows.length}}朋友{{{复数（rows）}}？（实际上只有{{rows.length-1}}}
{{$index+1}}
{{row}}

问题是您忘记在应用程序中声明控制器。

我认为您应该在加载脚本后初始化ng应用程序。另外，你的控制器必须在内联脚本之后。这非常有效，最重要的是，我可以看到我遗漏了什么。非常感谢。