Question

我有一张桌子，我希望其中一个列值可以根据它的标题进行更改（这将是一个选择）。

在我的控制器中我有：

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

我的表设置如下：

<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>

Answer 1

将vm.machine传递给控制器，控制器可以使用其currentPricing属性将正确的值返回给代码进行渲染。或者在许多不同的对象上使用ng-show来关闭那些不相关的对象

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

或者

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

Answer 2

我认为它看起来应该是那样的

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

Answer 3

我假设在下拉菜单中选择一些东西会重新计算价格。所以假设我会这样做：

<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;
}

}）;

angular - 根据下拉值更改列

3 个答案: