角度jsアプリが動作しない

-1

これは私の初めての角度です。私は角度を使用してアプリケーションを作成しましたが、ロードされていないようです。誰かが私のコードを見て、私がここで何か簡単なものを見逃しているかどうかを見ることができます。ありがとう。グレッグ角度jsアプリが動作しない

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

出典

2016-05-04 user3767554

私はスクリプトの読み込み後にng-appを初期化する必要があると思います。コントローラもインラインスクリプトの後になければなりません。 –

はあなたのコードの作業コピーです：

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

あなたのアプリでコントローラを宣言するのを忘れていました。

出典

2016-05-04 08:44:45 Maverick

それは完璧に動作し、最も重要なのは、私が欠けていたものを見ることができます。ありがとうございました！ – user3767554

あなたはあなたのコードのアドオンの終わりに、あなたのApp にあなたのコントローラを宣言するのを忘れ：ここ

myApp.controller('ctrl', ctrl);

出典

2016-05-04 08:41:32

角度jsアプリが動作しない

答えて

関連する問題