AngularJS过滤器点击

Question

第一次使用角度，我被卡住了！希望有人可以提供帮助。基本上我想在提交按钮单击时从输入值更新视图。不是在每个输入值发生变化时。

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;

};

});

这在人们键入时起作用，但我希望在单击提交时完成更新。

提前致谢！

Answer 1

替换下面的行

 <div class="search-result-property" data-ng-repeat="space in spaces| range:sqrf.sqrf:sqrt.sqrt:type.type | orderBy: sqrM">

与

 <div class="search-result-property" data-ng-repeat="space in spaces| range:filters.sqrf:filters.sqrt:filters.type | orderBy: sqrM">

当您在“提交”按钮上更新“过滤器”变量时