Angular JS中带有自定义文本的选择框中的预设选项答案

【问题标题】：Pre-set option in select box with customized text in Angular JSAngular JS中带有自定义文本的选择框中的预设选项
【发布时间】：2020-10-23 05:02:18
【问题描述】：

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

这是我迄今为止尝试过的

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

【问题讨论】：

这能回答你的问题吗？ how to use ng-option to set default value of select element

标签： javascript arrays angularjs ng-options

【解决方案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"};

工作小提琴： https://jsfiddle.net/rum25Lxz/

【讨论】：