在 angularjs 中自定义 ng-repeat
Posted
技术标签:
【中文标题】在 angularjs 中自定义 ng-repeat【英文标题】:Customize ng-repeat in angularjs 【发布时间】:2015-04-24 12:50:42 【问题描述】:我有一个示例 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 名称。
【问题讨论】:
【参考方案1】:您应该在选择中使用 ng-options。这样您就可以动态地获取选项。您还可以通过向选择添加 ng-change 事件来跟踪所选项目。
您的问题:显示名称而不是名称价格。您必须创建另一个选项并将该选项的文本设置为项目名称。
我创建了一个简单的小提琴供您参考。希望这可以帮助您更接近解决方案
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;
);
【讨论】:
【参考方案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>
希望对你有所帮助。
【讨论】:
下拉值如下:100 - 第一,200 - 第二,300 - 第三。一旦我选择“200 - Second”,那么我只需要显示“Second”而不是“200 - Second”。 然后你可以调用 ng-selected = "someMethod" 来只过滤名字。以上是关于在 angularjs 中自定义 ng-repeat的主要内容,如果未能解决你的问题,请参考以下文章
spring 4 中自定义 ExceptionTranslationFilter 来处理 REST AuthenticationException
angularJS中directive与controller之间的通信