Geek Answers Handbook

Ng-repeat based on selection of drop down menu or search input

Using $httpto add json to the table. I want to have it so that I can search for json from the input (which works for me), and I want to also be able to filter json based on the selection from the drop-down list. At this point, I don’t need to filter the filter twice, so I just want to be able to do this, but not at the same time.

Here is the html code and it ng-repeat="x in names | limitTo: 10 | filter:search_targetsworks fine, but I would also like to filter onindicator

<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 relevant js:

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

I really started working with angular, so any advice is welcome!

+4
source share
4 answers

...

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

plunk : http://plnkr.co/edit/BXTGpNsGeqT9kVsGnEOg?p=preview

: fooobar.com/questions/16684/...

Ps: - ... , ...

: : . . , ...

Edit2:

Edit3: (- , ). , , ... .

, ng.

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

ng-change="onChange('txt')" ng-change="onChange('drp')" ...

+1

, , .

$watch .

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/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);
});

html :

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

, , ng-repeat:

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

ng-init disabled . ng-init div, , "all", ng-init :

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

disabled " ". indicator , search_targets == "", search_targets , indicator == "". , , :

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

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

:

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

More articles:


All Articles