Skip to content

Instantly share code, notes, and snippets.

@abutler3
Created February 17, 2015 21:40
Show Gist options
  • Save abutler3/34080a684322b8da8cdb to your computer and use it in GitHub Desktop.
Save abutler3/34080a684322b8da8cdb to your computer and use it in GitHub Desktop.
Show and hide ng-repeat in angular practice
<!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