2016-05-04 13 views
-1

das ist mein erstes mal versuchen eckig. Ich habe eine App mit eckigen erstellt, aber es scheint nicht zu laden. könnte jemand einen Blick auf meinen Code werfen und sehen, ob mir hier etwas Einfaches fehlt. Vielen Dank. Gregeckig js app funktioniert nicht

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

Ich denke, Sie sollten Ihre ng-App nach dem Laden des Skripts starten. Auch Ihr Controller muss nach dem Inline-Skript sein. –

Antwort

1

Hier ist die Arbeitskopie des Codes:

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

die Problem war, dass Sie vergessen haben, den Controller in Ihrer App zu deklarieren.

+0

Das funktioniert perfekt und vor allem kann ich sehen, was ich vermisst habe. Vielen Dank! – user3767554

3

Sie haben vergessen, Ihren Controller auf Ihre App Am Ende des Codes zu erklären hinzufügen:

myApp.controller('ctrl', ctrl);