如何在选择选项中筛选名称angular js
问题描述:
我有一个select元素,它有一个名称和id作为选项值。并且在名称中加入' - '。有一种情况,名称将为空,' - '不应显示。如何在选择选项中筛选名称angular js
预计应该是这样的一些事情。
- 名字 - 123
这是我的尝试:
HTML:
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="model.selected" ng-options="item.Title as item.Title + '-' + item.ID for item in items"></select>
<p>Selected: {{model.selected}}</p>
</body>
</html>
控制器:
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.model = {
selected : 'Chicago'
}
$scope.items = [
{ID: '000.000.0001', Title: 'Chicago'},
{ID: '000.000.0002', Title: 'New York'},
{ID: '000.000.0003', Title: 'Washington'}
];
});
答
所有的
使用if-else这样的表达式:OK? yes:no
。
angular.module("app", [])
.controller("ctrl", function($scope) {
$scope.model = {
selected: 'Chicago'
}
$scope.items = [{
ID: '000.000.0001',
Title: 'Chicago'
},
{
ID: '000.000.0002',
Title: 'New York'
},
{
ID: '000.000.0003',
Title: 'Washington'
},
{
ID: '000.000.0004'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="model.selected" ng-options="item.Title as item.Title? (item.Title + '-' + item.ID) : ('' + item.ID) for item in items"></select>
<p>Selected: {{model.selected}}</p>
</div>
答
首先纠正你在app.js文件控制器和应用程序的名称。 然后如下更新你的代码。
<select ng-model="model.selected" ng-options="item.Title as (item.Title !==''? item.Title + '-' : '') + item.ID for item in items"></select>
所以你的问题是如何隐藏默认' - '? –