Is there a way to show a property of a filtered array in angularjs filter?

Question

I try to show just one specific property of a filtered array. Is there a way to show a property without using a custom method in my controller? I mean directly in the view?

my order.options array:

[
    {value: '0', text: 'random'},
    {value: '1', text: 'names'},
    {value: '2', text: 'ages'}
]

My view:

<span>{{order.options | filter:order.value}}</span><!--  I need help here -->                          
<select ng-model="order.value">
    <option value="{{option.value}}" ng-repeat="option in order.options">{{option.text}}</option>
</select>

If the user orders the list by changing the select, I want to show the text of the selected value somewhere (the value in order.options[INDEX].text)

For example, if the user selects 'random' in the select, random shoud be shown in a span before the select.

I have to use different values and texts in my options, because im ordering the list next to the select by the value (whis is a property of the list item)

sylwester · Accepted Answer · 2014-12-01 09:41:26Z

2

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {

  $scope.order = {
    options:

      [{
      value: '0',
      text: 'random'
    }, {
      value: '1',
      text: 'names'
    }, {
      value: '2',
      text: 'ages'
    }]
  };
  
  //set default value for selectedOrder
  $scope.selectedOrder = $scope.order.options[0];


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">


    <span>{{selectedOrder.text}}</span>
    <!--  I need help here -->
    <select ng-model="selectedOrder" ng-options="option.text for option in order.options">

    </select>

  </div>
</div>

answered Dec 1, 2014 at 9:41

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nano Over a year ago

Thank you! I didnt knew about the ng-options directive :D

Manish Kr. Shukla · Accepted Answer · 2014-12-01 10:01:29Z

0

Why not use the selected option directly as the model value ??

<select ng-model="selectedOrder">
    <option ng-value="option" ng-repeat="option in order.options">{{option.text}}</option>
</select>

You can then use selectedOrder.value and selectedOrder.text independently, Directly in view, without any controller method invocation.

edited Dec 1, 2014 at 10:01

answered Dec 1, 2014 at 9:32

Manish Kr. Shukla

4,4771 gold badge22 silver badges35 bronze badges

2 Comments

Nano Over a year ago

if I do something like this the selectedOrder contains the value, but it doesnt have any selectedOrder.text property

Manish Kr. Shukla Over a year ago

Sorry for the typo, the html had a mistake. Pls find the updated answer.

Collectives™ on Stack Overflow

Is there a way to show a property of a filtered array in angularjs filter?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related