0
anglejsを使用して自動的にデータを出力する際に問題があります。角度のクールな機能の1つは、双方向データバインディングです。入力をjsonファイルでバインドすることができません。私がしようとしているのは、ユーザー入力が双方向データバインディングを使用して、キー、出力キーと自動的に一致するかどうかです。ユーザーが選択を削除すると、出力またはビューも変更されます。正しい結果が得られるようにボタンng-clickディレクティブを使用しています。どんな助けもありがとう。AngularJS双方向データバインディング入力と一致するjsonファイル
私がしようとしていること： 1.if入力がjson情報を含むリンクと一致する場合、その情報を双方向データバインディングを使用して自動的に出力します。情報を得るためには、ボタンをクリックしないでください。 3.ユーザー入力を削除すると、出力データも削除されます。
<!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-->