select 框中的预设选项和 Angular JS 中的自定义文本

Question

我想通过使用数组中可用的整个对象来预先设置我的 select 框。文本将通过使用对象字段进行自定义，如下图所示

这是我目前尝试过的方法

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="employee" ng-options="item as (item.name+' - '+item.post) for item in employees">
<option value="">select</option>
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.employees = [{name:"Mehtab",post:"SE"}, {name:"Punit", post:"PM"}, {name:"Ashutosh", post:"SSE"}];
    $scope.employee = {name:"Punit", post:"PM"};
});
</script>

</body>
</html>

Answer 1

这是你想要的吗：

html:

<select ng-model="employee.name" ng-options='item.name as (item.name + " - " + item.post) for item in employees'>
<option value="">select</option>

JS:

$scope.employees = [
      {name:"Mehtab",post:"SE"}, 
      {name:"Punit", post:"PM"}, 
      {name:"Ashutosh", post:"SSE"}
    ];
$scope.employee = {"name":"Punit","post":"PM"};

工作fiddle： https://jsfiddle.net/rum25Lxz/

select 框中的预设选项和 Angular JS 中的自定义文本

Pre-set option in select box with customized text in Angular JS

javascript

arrays

angularjs

ng-options