在angularjs中自定义ng重复

Question

我有一个示例 anjularjs 示例，它拉取 sku 详细信息数组，在选择下拉列表中显示价格和名称。现在我在下拉列表中选择了任何选项，它显示SKU名称和价格。

下面是我的选择标签，现在正在显示，sku名称和价格。

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

以下是我的skulist数据：

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;

所以在这里，我的要求是下拉列表应该包含sku名称和价格，但一旦选择了值，然后只显示sku名称。

Answer 1

您应该在select中使用ng选项。这样，您可以动态获取选项。您还可以通过向所选内容添加ng更改事件来跟踪所选内容。

您的问题：显示名称而不是名称价格。您必须创建另一个选项，并将该选项的文本设置为项目名称。

我做了一把简单的小提琴供你参考。希望这有助于你离解决方案越来越近

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

Answer 2

您可以将sku列表创建为一个复杂对象。

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

在您的ng-repeat中，您可以访问:

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

希望对您有所帮助。