javascript - ng-repeat based on dropdown selection or search input - Stack Overflow

admin管理员组

文章数量:1431391

Using $http to get some json to put in a table. I want to have it so I can search the the json from an input (which I have working) and I want to also be able filter the json based on the selection from a drop down. I don't need to double filter at this point, so I just want to be able to do both but not simultaneously.

Here is the html code and the ng-repeat="x in names | limitTo: 10 | filter:search_targets works fine but I would also like to filter on indicator

<div class="col s3"style="padding: 1vh;">
    <div class="grey darken-3"style="height: 98vh">
        <h4 class="right" style="padding:1vh">Parameters</h4>
        <div ng-app="myApp" ng-controller="customersCtrl" class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="search_targets" type="text" class="validate" ng-model="search_targets">
                        <label for="search_targets">Search Targets</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <select ng-model="indicator">
                            <option value="" disabled>Select Indicator</option>
                            <option value="Mexico">Mexico</option>
                            <option value="France">France</option>
                            <option value="3">Option3</option>
                            <option value="4">Option4</option>
                            <option value="5">Option5</option>
                            <option value="6">Option6</option>
                            <option value="7">Option7</option>
                            <option value="8">Option8</option>
                            <option value="9">Option9</option>
                            <option value="10">Option10</option>
                            <option value="11">Option11</option>
                            <option value="12">Option12</option>
                            <option value="13">Option13</option>
                            <option value="14">Option14</option>
                            <option value="15">Option15</option>
                            <option value="16">Option16</option>
                            <option value="17">Option17</option>
                            <option value="18">Option18</option>
                        </select>
                        <label>I.A.T Indicators</label></label>
                    </div>
                </div>
                <div class="col s12" style="
                    padding-left: 11.250px;
                    padding-right: 11.250px;
                    margin top:5vh;
                    ">
                    <table>
                        <thead>
                            <tr>
                                <th data-field="id">Name</th
                                <th data-field="name">Score</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="x in names | limitTo: 10 | filter:search_targets">
                                <td>{{x.Name}}</td>
                                <td>{{x.Country}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </form>
        </div>

and here is the pertinent js:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get(".php")
        .success(function (response) {$scope.names = response.records;});
});

I have only really started to work with angular, so any advice is wele!

Using $http to get some json to put in a table. I want to have it so I can search the the json from an input (which I have working) and I want to also be able filter the json based on the selection from a drop down. I don't need to double filter at this point, so I just want to be able to do both but not simultaneously.

Here is the html code and the ng-repeat="x in names | limitTo: 10 | filter:search_targets works fine but I would also like to filter on indicator

<div class="col s3"style="padding: 1vh;">
    <div class="grey darken-3"style="height: 98vh">
        <h4 class="right" style="padding:1vh">Parameters</h4>
        <div ng-app="myApp" ng-controller="customersCtrl" class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="search_targets" type="text" class="validate" ng-model="search_targets">
                        <label for="search_targets">Search Targets</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <select ng-model="indicator">
                            <option value="" disabled>Select Indicator</option>
                            <option value="Mexico">Mexico</option>
                            <option value="France">France</option>
                            <option value="3">Option3</option>
                            <option value="4">Option4</option>
                            <option value="5">Option5</option>
                            <option value="6">Option6</option>
                            <option value="7">Option7</option>
                            <option value="8">Option8</option>
                            <option value="9">Option9</option>
                            <option value="10">Option10</option>
                            <option value="11">Option11</option>
                            <option value="12">Option12</option>
                            <option value="13">Option13</option>
                            <option value="14">Option14</option>
                            <option value="15">Option15</option>
                            <option value="16">Option16</option>
                            <option value="17">Option17</option>
                            <option value="18">Option18</option>
                        </select>
                        <label>I.A.T Indicators</label></label>
                    </div>
                </div>
                <div class="col s12" style="
                    padding-left: 11.250px;
                    padding-right: 11.250px;
                    margin top:5vh;
                    ">
                    <table>
                        <thead>
                            <tr>
                                <th data-field="id">Name</th
                                <th data-field="name">Score</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="x in names | limitTo: 10 | filter:search_targets">
                                <td>{{x.Name}}</td>
                                <td>{{x.Country}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </form>
        </div>

and here is the pertinent js:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools./angular/customers.php")
        .success(function (response) {$scope.names = response.records;});
});

I have only really started to work with angular, so any advice is wele!

• javascript
• jquery
• json
• angularjs

Share Improve this question Follow edited Apr 20, 2015 at 15:27 RevanProdigalKnight 1,32611 gold badge1414 silver badges2323 bronze badges asked Apr 20, 2015 at 14:04 erperp 3,0341010 gold badges5050 silver badges9191 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I am not a pro ether, but it might help if you use a third value to filter by, and save the other two to the scope.

You can use $watch to trigger value changing, and modify the third value accordingly.

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools./angular/customers.php")
         .success(function (response) {$scope.names = response.records;});

    $scope.indicator="";
    $scope.search_targets="";
    $scope.thirdvariable="";

    $scope.$watch('search_targets', function(newval,oldval)
    {
        $scope.indicator="";
        $scope.thirdvariable=newval;
    }, true);
    $scope.$watch('indicator', function(newval,oldval)
    {
        $scope.search_targets="";
        $scope.thirdvariable=newval;
    }, true);
}); 

And into the html goes this:

<tr ng-repeat="x in names | limitTo: 10 | filter:thirdvariable ">

A more concise way would be to use a watch group or a watch collection...

$scope.$watchCollection('[selCountry, searchText]', function(n, o, scope) {
    //logic to determine what changed...
});

You can view the plunk here: http://plnkr.co/edit/BXTGpNsGeqT9kVsGnEOg?p=preview

You may also refer the following post: https://stackoverflow./a/17224886/145682

Ps: having some weird problem with the plunk...hopefully I can fix it...

Edit: plunk fixed: see this post. Still feels there is a better way...

Edit2: better more maintainable version

Edit3: I am officially changing my answer (because of post pointed to in my 2nd edit). I think that that approach is better than watching two variables...it is simpler.

Rather have a single ng-change function to execute. Pass an argument to that and handle logic accordingly

$scope.onChange = function(src) {
   if(src === 'txt') {
       //from text box
   }
   else {
       //from dropdown
   }
};

Set ng-change="onChange('txt')" and ng-change="onChange('drp')" to the textbox and dropdown respectively...

I apologize in advance if I'm misunderstanding your question, but wouldn't the following filter added to your ng-repeat acplish this:

<tr ng-repeat="x in names | limitTo: 10 | filter:search_targets | filter:indicator">

Using ng-init along with a pair of disabled attributes may help you here. Add an ng-init to the div where your controller is declared and set default value of "all" by setting ng-init to an empty string:

<div ng-app="myApp" ng-controller="customersCtrl" ng-init="search_targets=''; indicator=''" class="row">

Then add a disabled attribute to each "selection area". indicator only functions as a choice to the user when search_targets == "", and search_targets only functions as a choice when indicator == "". That way when either field is filtered by the user the other field is disabled as a choice:

<div class="input-field col s12" disabled="indicator != ''">

<div class="input-field col s12" disabled="search_targets != ''">

Your filter would look like this:

<tr ng-repeat="x in names | limitTo: 10 | filter:search_targets | filter:indicator">

本文标签： javascriptngrepeat based on dropdown selection or search inputStack Overflow