[英]How can I take a input value and put into a variable in angularJS?
如何獲取輸入值並將其放入angularJS中的變量? 這是我頁面上的工作測試版本,但我與AngularJS一起使用了javascript和jquery使其工作,但仍然給我錯誤。 我知道必須有一種方法來獲取輸入值,並通過angularJS將其放入var值中,而無需手動編寫它的操作方式。
index.html
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Find That Poster</h1>
<div class="searchbox">
<button ng-click="start()" class="searchButton" id="btnSearch" value="Search">Search</button>
<p></p>
<input onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()">
</div>
</div>
</div>
</div>
</div>
<div class="content" ng-controller="StoreController as store">
<div class="container">
<div class="row">
<div >
<div class="col-md-3 posterImg" ng-repeat="product in store.products.results">
<span><img ng-src="http://image.tmdb.org/t/p/w300{{product.poster_path}}" class="img-responsive"></span>
<div >
<!-- <h2> {{product.original_title}}</h2>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
app.js //角度
(function() {
var app = angular.module('store', ['store-products']);//main app ng-app
app.controller('StoreController',[ '$http', function($http){
var store = this;
store.products = [ ];
$(document).ready(function() {
$( "input" ).keyup(function() {
var value = $( this ).val();
$('button').click(function() {
$http.get("http://api.themoviedb.org/3/search/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&query=" + value ).success(function(data){
store.products = data;
});
});
})
.keyup();
});
}]);
})();
您需要ng-model
屬性。
例:
<input onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()" ng-model="search">
然后,您可以使用$scope.search
訪問變量。
如我所見,您當前未注入$ scope。 這是怎么做的:
app.controller('StoreController', ['$scope', '$http', function($scope, $http){
在文檔中查看更多。
建議將您的jquery事件處理程序重寫為angular事件處理程序。 因此,代替$('button').click(function() {
,創建綁定到搜索按鈕的click事件的$scope.start()
函數。
使用ng-model獲取變量的值並使用ng-keydown監聽按鍵
<div class="searchbox">
<button ng-click="search()" class="searchButton" id="btnSearch" value="Search">Search</button>
<p>
</p>
<input ng-keydown="press($event)" ng-model="searchField" >
</div>
然后在控制器中調用剛綁定到dom元素的函數
app.controller('StoreController', [
'$scope',
'$http',
function ($scope, $http) {
$scope.press = function (e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
$scope.search();
}
};
$scope.search = function (e) {
$http.get("http://api.themoviedb.org/3/search/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&query=" + $scope.searchField )
.success(function(data){
$scope.products = data;
});
};
}
]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.