angular - Change column based on dropdown value

Question

I have a table and I'd like one of the columns values to change based on it's header (which will be a select).

In my controller I have:

vm.pricing = [
        {
            id: 'price1',
            heading: 'Floor'
        },
        {
            id: 'price2',
            heading: 'Retail'
        }
    ];

My table is setup like:

<thead>
    <tr>
        <td>Vendor</td>
        <td>
            <select ng-model="vm.currentPricing"
                    ng-options="p.id as p.heading for p in vm.pricing">
            </select>
        </td>
    </tr>
</thead>

<tbody>
    <tr>
        <td>{{::vm.machine.vendorNbr}}</td>
        <td>{{vm.machine.price1}}</td>  <-- ****** What should go here?
    </tr>
</tbody>

Share what you've tried

mohamedrias
– mohamedrias

2015-03-19 15:12:51 +00:00
Commented Mar 19, 2015 at 15:12 — mohamedrias
– mohamedrias, Commented Mar 19, 2015 at 15:12

Ashley Frieze · Accepted Answer · 2015-03-19 15:14:03Z

1

Pass vm.machine to the controller which can use its currentPricing property to return to your code the correct value to render. Or use ng-show on lots of different objects to turn off the ones which are not relevant

<!-- Assuming vm is your controller, a function in it could do the rendering based on currentPricing field -->
<td>{{vm.describePrice(vm.machine)}}</td>

Or

<td ng-show="vm.currentPricing=='Option1'">{{vm.machine.price1}}</td>
<td ng-show="vm.currentPricing=='Option2'">{{vm.machine.price2}}</td>

answered Mar 19, 2015 at 15:14

Ashley Frieze

5,5382 gold badges34 silver badges26 bronze badges

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

1 Comment

Cooper Over a year ago

Option 1 worked great, for my controller I added: function describePrice(machine) { return machine[vm.currentPricing]; }

maurycy · Accepted Answer · 2015-03-19 15:18:07Z

0

I think it should look like that

<tbody>
    <tr>
        <td>{{::vm.machine.vendorNbr}}</td>
        <td>{{vm.currentPricing.heading}}</td>  <-- ****** What should go here?
    </tr>
</tbody>

answered Mar 19, 2015 at 15:18

maurycy

8,4201 gold badge30 silver badges44 bronze badges

Comments

Chris Noring · Accepted Answer · 2015-03-19 15:27:30Z

I'm assuming choosing something in dropdown recalculates the price. so given that assumption I would do this:

<thead>
<tr>
    <td>Vendor</td>
    <td>
        <select ng-model="vm.currentPricing"
                ng-options="p.id as p.heading for p in vm.pricing">
        </select>
    </td>
</tr>
</thead>

<tbody>
<tr>
    <td>{{::vm.machine.vendorNbr}}</td>
    <td>{{vm.machine.getPrice()}}</td>  
</tr>
</tbody>

--- app.js ----

app.controller('SomeController',function($scope){
    $scope.machine.getPrice = function(){
        var price = $scope.basePrice * (1 +  $scope.currentPricing); // I don't know how you calc new price
        return price;
}

});

Collectives™ on Stack Overflow

angular - Change column based on dropdown value

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related