CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
jettisamba
jettisamba

Reputation: 711

Customize ng-repeat in angularjs

I have one sample anjularjs example, which pulls the array of sku details shows there price and name in selection drop down. Now i selected any option in dropdown it is showing sku name and price.

Below is my select tag which is showing now, sku name with price. 

<select ng-model="selectedItem">
     <option ng-repeat="item in skulist.sku" value="{{item.price + ' - ' + item.name}}">{{item.price + ' - ' + item.name}}</option>
</select>

Below is my skulist data:

skulist.sku[0].name="First sku";
skulist.sku[0].price = Rs.100;
skulist.sku[1].name="Second sku";
skulist.sku[1].price = Rs.200;
skulist.sku[2].name="Third sku";
skulist.sku[2].price = Rs.300;

So here my requirement is to dropdown should contains both sku name and price, But once value selected then show only sku name.

Upvotes: 0

Views: 100

Answers (2)

Yameen
Yameen

Reputation: 585

You should use ng-options within the select. This way you can fetch the options dynamically. You can also keep track of item selected by adding an ng-change event to the select.

Your question: Show a name instead of name-price. You have to create another option and set the text to that option as the item name.

I have created a simple fiddle for your reference. hope this hepls you getting nearer to the solution

https://jsfiddle.net/YameenYasin/9a5nfugo/44/

<div ng-controller="myController">
<select ng-model="selectedItem" 
        ng-options="item as item.price + ' ' + item.name for item in skulist"  ng-change="updateText(selectedItem.name)"

    >
        <option value=''>{{selectedValue}}</option>
</select>
</div>

var app = angular.module('app',[]);
app.controller("myController",function($scope){
        $scope.skulist = [{"name": "First", "price": "Rs.100"},
                  {"name": "Second", "price": "Rs.200"},
                  {"name": "Third", "price": "Rs.300"}
        ];    
    $scope.selectedValue = '';
    $scope.updateText = function(name){      
       $scope.selectedValue = name;
       $scope.selectedItem = $scope.selectedValue;       
    }
});

Upvotes: 0

JiniKJohny
JiniKJohny

Reputation: 1182

You can create sku list as a complex object.

$scope.skulist = [{"name": "First", "price": "Rs.100"},
                  {"name": "Second", "price": "Rs.200"},
                  {"name": "Third", "price": "Rs.300"}
];

And in your ng-repeat you can access :

<select ng-model="selectedItem">
     <option ng-repeat="item in skulist" value="{{item.price + ' - ' + item.name}}">{{item.price + ' - ' + item.name}}</option>
</select>

Hopes it may help you.

Upvotes: 0

Related Questions