AngularJS雙向數據綁定輸入匹配json文件
[英]AngularJS two way data binding input matching json file
問題描述
我在使用angularjs自動輸出數據時遇到問題。 angular的很酷的功能之一是雙向數據綁定。 我無法將輸入與json文件綁定。 我正在嘗試做的是，如果用戶輸入使用兩種方式的數據綁定自動匹配一個鍵，一個輸出鍵。 並且當用戶刪除其選擇時，輸出或視圖也會更改。 我可以使用按鈕ng-click指令獲得正確的結果。 任何幫助，將不勝感激。
我想做的是：1.如果輸入匹配包含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-->
2 個解決方案
解決方案1
1 2016-06-15 17:16:00
我想在這里注意幾件事。 首先，是朋克： https ://plnkr.co/edit/IgcuE2fKlqPcT9ZV9GQ5
- 您的腳本/ css參考指向相對路徑，因此我只是從plunker中獲取了所用庫的最新版本。 您所看到的可能不是您想要看到的，但這是您從所提供的內容中獲得的最好的收獲。
- 包含“神奇寶貝”列表的響應是一個對象，而不是數組。 您可以使用
ng-repeat遍歷對象，但不能在對象上使用filter指令。 因此，我修改了您的findValue方法，以便它創建一個將與ng-repeat一起使用的新數組。 我刪除了if (key === search)檢查，因為您可以使用filter: search指令來過濾數組。 該搜索將是瞬時的，並且將在輸入框中的值更改后立即執行。 -
ng-model僅綁定到input，select和textarea因此將它們放在<td>上沒有意義。 看到這里： https : //docs.angularjs.org/api/ng/directive/ngModel - 我不確定＃3的意思。 （順便說一句，＃2丟失了）如果要清空
results數組，只需在ng-click方法中設置$scope.results = []，就可以了。
解決方案2
0 已采納 2016-06-15 18:14:39
根據您的要求完美地工作。 @yourrock給出的另一個答案只是對json集的過濾器，它不是雙向綁定。
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<meta charset="UTF-8">
<title>Pokedex</title>
</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" data-ng-change="findValue(search)" ng-keydown="removeTagOnBackspace($event)" ng-click="deleting()">
<!-- <button ng-change="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">
{{ x.Name | lowercase}}
</td>
<td>
<img ng-model="value" ng-src="{{x.Image}}">
</td>
</tr>
</table>
</div>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $http) {
$scope.getResult=function(){
$http.get("https://raw.githubusercontent.com/dmedina0217/pokedex/master/pokemon-images.json").then(function(response) {
$scope.images = response.data;
console.log($scope.images)
$scope.results = [];
$scope.findValue = function(search) {
angular.forEach($scope.images, function(value, key) {
debugger
if (key == search) {
$scope.results.push({
Name: key,
Image: value
}).$filter(lowercase);
}
});
console.log($scope.results)
};
$scope.removeTagOnBackspace = function (event) {
if (event.keyCode === 8) {
$scope.results=[];
console.log('here!');
}
};
$scope.deleting = function() {
$scope.search = null;
}
});
}
$scope.getResult();
});
</script>
</body>
</html>
AngularJs雙向數據綁定不適用於定制指令輸入元素
[英]AngularJs two-way-data-binding not working for custome directive input elements
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.