current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I currently have a form with two dynamic dropdowns (Location & Branch). When one of Location values is selected, Branch will automatically populate the corresponding branches with that location.

<select ng-model="formData.location" 
        ng-options="rg as rg.type for rg in region">
    <option value="">Choose Location</option>
</select>

<select ng-model="formData.branches" 
        ng-options="c as c[formData.location.displayName] for c in formData.location.data | orderBy:'branch'">
    <option value="">Choose Branch</option>
</select>

The Branch values are taken from this controller:

scope.metro = [
    {"branch": "SM North EDSA", "alias": "northedsa"}, 
    {"branch": "Trinoma", "alias": "trinoma"}, 
    {"branch": "Robinsons Galleria", "alias": "robgalleria"}, 
    // etc...
];

scope.region = [
    { type: 'Metro Manila', data:scope.metro, displayName:'branch', alias:'alias'},
    { type: 'Central Luzon', data:scope.central, displayName:'branch', alias:'alias'},
    { type: 'North Luzon', data:scope.north, displayName:'branch', alias:'alias'},
    // etc...
  ];

Now, inside the form, on every option change in Branch, there will be a pre-generated code from the table in my database (assigned on each of its row), procured by ng-repeat like this:

<div ng-repeat="codes in response">
  <span ng-if="((codes.branch == formData.branches.alias) && (codes.taken == 0))">
  {{codes.code}}
</div>

My database table looks like this:

database table here

This works when it is left as it is (displaying 100 codes each iteration). But when I use a filter such as limitTo:1, I only get the first index of the row in the table of my database. What I need is to get the first element of the response array on every flip of Branch values.

For clearer explanation, this ng-repeat is done by having this function in my controller:

http.get("server/fetch.php").success(function(response){
    scope.response = response;
    // shuffleArray(scope.response);
  }).error(function() {
    scope.response = "error in fetching data";
  });

I was told do this in a controller instead if I wanted to get the first element of each array, but I am not sure how to do that. I will post a plunker when I have the time. I just need this solve right now as I have deadlines to meet before the day ends.

I hope this question is all clear even without a plunker. Thanks in advance!

share|improve this question
    
Can you post the "offending" code, i.e. the code that doesn't do what you want – New Dev May 10 '15 at 2:35
    
<div ng-repeat="codes in response | limitTo:1"> <span ng-if="((codes.branch == formData.branches.alias) && (codes.taken == 0))"> {{codes.code}} </div> The AngularJS filter only gets the first index of the table in my database. It's not what I want. I need to have the first element of the response array on each select of Branch. – ralphcarlo May 10 '15 at 2:38
    
| limitTo: 1 would take the first element of response array – New Dev May 10 '15 at 2:41
    
you need to take the conditions you use in ng-if and make a custom filter for the ng-repeat instead. Then put that filter in and the limit:1 would be based on the filtered array instead of the whole array – charlietfl May 10 '15 at 2:42
    
@NewDev limitTo: 1 only takes the first index, not the first element. I run it and DZXXK768 is the only one returned even after an option change from Branch. – ralphcarlo May 10 '15 at 2:44
up vote 3 down vote accepted

You could pipe multiple filters together, the first to filter based on branch, and next to limit the number of returned items:

<div ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1">
   {{codes.code}}
</div>

In this case it was possible to use the built-in filter filter since it allows specifying a predicate for multiple properties to match against with an AND condition. For any more complex condition, I recommend using a predicate function:

$scope.filterBy = function(a, b){
  return function(item){
    return item.foo === a || item.bar === b;
  }
}

and use it like so:

<div ng-repeat="item in items | filter: filterBy('foo', 'bar')">
share|improve this answer
    
THIS WORKED! THANKS! :) – ralphcarlo May 10 '15 at 2:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.