angularを初めて使用し、立ち往生しています! 誰かが助けてくれることを願っています。基本的に、送信ボタンのクリック時に入力値からビューを更新したいと考えています。各入力値が変化したときではありません。
HTML
<input name="type.type" ng-model="type.type" type="text">
<input name="sqrf.sqrf" ng-model="sqrf.sqrf" type="text">
<input name="sqrt.sqrt" ng-model="sqrt.sqrt" type="text">
<input type="submit" value="search" class="search-submit" ng-click="getFilters()">
<div data-ng-app="propertySearch" data-ng-controller="inputs">
<div class="search-result-property" data-ng-repeat="space in spaces| range:sqrf.sqrf:sqrt.sqrt:type.type | orderBy: sqrM">
<img src="{{space.imageUrl}}" alt="">
<h3>{{space.heading}}</h3>
<p class="space-sqm">{{space.sqrM}}</p>
<p>{{space.description}}</p>
<p><a href="#">{{space.link}}</a></p>
</div>
</div>
JS
var propertySearch = angular.module('propertySearch', []);
var filters = {};
var controllers = {};
var filters = {}
controllers.inputs = function($scope){
$scope.getFilters = function(){
filters.type = this.type.type
filters.sqrf = this.sqrf.sqrf
filters.sqrt = this.sqrt.sqrt
};
$scope.spaces = [
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '1,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'warehouse'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '3,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'development'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'},
{imageUrl : '/img/property.jpg', heading : 'Macquarie View Corporate Park – Stage 2', sqrM : '2,350 sqm', description : 'Contrary to popular belief, Lorem Ipsum is not simply random text, it has roots in a piece of classical.', link : '#', type : 'office'}
];
}
propertySearch.controller(controllers);
propertySearch.filter('range', function() {
return function(properties, sqrf, sqrt, type){
var retProperties = [];
var lowRange = sqrf;
var highRange = sqrt;
if(lowRange == 'Any'){
lowRange = 0;
};
if(highRange == 'Any'){
highRange = 5000;
};
for (var i = 0; i < properties.length; i++) {
var property = properties[i];
var sqrMeters = property.sqrM.replace(/\D/g,'');
type = type.toLowerCase();
if(sqrMeters >= lowRange && sqrMeters <= highRange) {
if(property.type == type || type == 'any'){
retProperties.push(property);
}
}
}
return retProperties;
};
});
これは人のタイプとして機能しますが、送信クリックで更新を行いたいです。
前もって感謝します！