2017-03-08 13 views
0

私はオプションの値として名前とIDを持つselect要素を持っています。名前と共に「 - 」を追加しています。名前が空になるシナリオがあり、 ' - 'は表示されません。選択オプションの名前をフィルタリングする方法角度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

ですから、デフォルトで「 - 」を非表示にするにはどうすればよいですか? –

答えて

1

OK? yes:noのようなif-else式を使用します。

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>

1

まず第一には、app.jsファイル内のコントローラとAPP名を修正してください。 次にコードを次のように更新します。

<select ng-model="model.selected" ng-options="item.Title as (item.Title !==''? item.Title + '-' : '') + item.ID for item in items"></select> 
関連する問題