如何在选择选项中筛选名称angular js

问题描述:

我有一个select元素,它有一个名称和id作为选项值。并且在名称中加入' - '。有一种情况,名称将为空,' - '不应显示。如何在选择选项中筛选名称angular js

预计应该是这样的一些事情。

  1. 名字 - 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'} 
    ]; 
}); 
+0

所以你的问题是如何隐藏默认' - '? –

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