Created
February 17, 2015 21:40
-
-
Save abutler3/34080a684322b8da8cdb to your computer and use it in GitHub Desktop.
Show and hide ng-repeat in angular practice
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html ng-app="MyApp"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>My AngularJS App</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body> | |
<!--[if lt IE 7]> | |
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> | |
<![endif]--> | |
<div ng-controller="MyCtrl"> | |
<!-- call $scope.search() when submit is clicked. --> | |
<form> | |
<!-- will automatically update $scope.user.first_name and .last_name --> | |
<input type="text" ng-model="first_name"> | |
<input type="text" ng-model="last_name"> | |
</form> | |
<a href="" ng-click="showme=true">Show</a> | |
<button ng-click="showme=false" ng-click="search()">Get Results</button> | |
<div ng-hide="showme"> | |
Results: | |
<ul> | |
<!-- assuming our search returns an array of users matching the search --> | |
<li ng-repeat="user in results"> | |
{{user.first_name}} {{user.last_name}} | |
</li> | |
</ul> | |
<span ng-show="(results).length == 0">No results</span> | |
</div> | |
</div> | |
<!-- In production use: | |
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> | |
--> | |
<script src="js/angular-1.3.13/angular.js"></script> | |
<script src="js/angular-1.3.13/angular-route.js"></script> | |
<script src="js/app.js"></script> | |
</body> | |
</html> | |
var app = angular.module('MyApp', []); | |
app.controller('MyCtrl', ['$scope', '$http', function($scope, $http) { | |
$scope.user = {}; | |
// $scope.results = []; | |
$scope.search = function() { | |
/* the $http service allows you to make arbitrary ajax requests. | |
* in this case you might also consider using angular-resource and setting up a | |
* User $resource. */ | |
$http.get('js/person.json'). | |
success(function(response) { | |
$scope.results = response; | |
console.log("Success"); | |
}). | |
error(function(failure) { | |
console.log("Failed"); | |
}); | |
// $scope.results = []; | |
}; | |
}]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment