CODEWITHSUNDEEP
arraysangularjsangularjs-scopeangularjs-ng-repeatangularjs-filter
ralphcarlo
ralphcarlo

Reputation: 209

AngularJS: Display the first element of the response array

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!

Upvotes: 2

Views: 7570

Answers (1)

New Dev
New Dev

Reputation: 49590

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')">

Upvotes: 3

Related Questions