I am having issues with outputting data automatically using angularjs. One of the cool features of angular is the two way data binding. I am not able to bind the input with a json file. What I am trying to do is if user input matches a key, output key, automatically, using two way data binding. And when user deletes his selection, the output or view also changes. I am able to get the correct results but using a button ng-click directive. Any help would be appreciated.
What I am trying to do: 1.if input matches link which contains json information, output that information automatically using two way data binding. No buttons should be clicked in order to get information. 3.when I delete user input, output data will also delete.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<meta charset="UTF-8">
<title>Pokedex</title>
<!--Angular STYLE SHEET-->
<link rel="stylesheet" href="Content/angular-material.min.css" />
</head>
<body ng-controller="ctrl">
<md-toolbar class="md-padding">
<div class="md-toolbar-tools">
<h1 class="md-flex"><strong> Angular DM</strong></h1>
</div>
<md-nav-bar nav-bar-aria-label="navigation links">
<a href="index.html">Movie Database</a>
<a href="input_Control.html">Pokedex</a>
</md-nav-bar>
<!--INPUT-->
<input ng-model="search" type="text" placeholder="Enter Pokemon Name" ng-click="deleting()">
<button ng-click="findValue(search)">Search</button>
<span> {{search | lowercase}}</span>
<div>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Image</th>
</tr>
<tr ng-repeat="x in results">
<td></td>
<td ng-model="key">
{{ $index+1 + x.Name | lowercase}}
</td>
<td>
<img ng-model="image" ng-src="{{x.Image}}">
</td>
</tr>
</table>
</div>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope, $http) {
$http.get("https://raw.githubusercontent.com/dmedina0217/pokedex/master/pokemon-images.json").then(function (response) {
$scope.images = response.data;
$scope.results = [];
$scope.findValue = function (search) {
angular.forEach($scope.images, function (value, key) {
if (key === search) {
$scope.results.push({ Name: key, Image: value }).$filter(lowercase);
}
});
};
$scope.deleting = function () {
$scope.search = null;
}
});
});
</script>
<!-- Angular Material Script START-->
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-animate.min.js"></script>
<script src="scripts/angular-aria.min.js"></script>
<script src="scripts/angular-messages.min.js"></script>
<script src="scripts/angular-material/angular-material.min.js"></script>
<!-- Angular Material Script END-->
