在select中创建空白选项可能非常烦人。任何解决方案：
angular.module('myApp', ['ui.bootstrap','angularSpinners'])
.controller("StudentController",function($scope,$http,$modal){
$scope.students=[
{"first_name":"Miguel","last_name":"Smith","id":10},
{"first_name":"Ann","last_name":"Jones","id":11}
];
$scope.courselist=[
{"first_name":"Dave","last_name":"Smith","id":8},
{"first_name":"Mike","last_name":"Winner","id":9}
];
$scope.sDefault=$scope.courselist[0].id;
})
.directive('thisView', function() {
return {
restrict:"E",
scope: {
students:"=",
courselist:"=",
sDefault:"="
},
templateUrl: 'this-view.html',
controller: function($scope) {
$scope.remStudent = function(remId) {
$scope.students.splice( $.inArray(remId, $scope.students), 1 );
$scope.courselist.push(data);//data will be returned from http not relevant for question
};
$scope.addStudent = function(addId) {//this from student list
$scope.students.push(data);//data will be returned from http not relevant for question
$scope.courselist.splice( $.inArray(addId, $scope.courselist), 1 );
};
}
});
在主页上：
<div ng-controller="StudentController">
{{sDefault}} //works
<this-view students="students" courselist="courselist" sDefault="sDefault"></this-view>
</div>
此-view.html：
{{sDefault}} //doesn't work
<form ng-submit="addStudent(addStudentId)">
<select class="form-control" ng-model="addStudentId" >
<option value="" selected>Default</option>
<option ng-repeat="option in courselist" value="{{option.id}}" >{{option.first_name}} {{option.last_name}}</option>
</select>
<input type="submit" class="btn btn-primary btn-lg" value="Add Student" />
</form>
我尝试过没有空白选项的选项，但是当我这样做时，模型不会在提交时发布，所以我添加了一个默认值：
<option value="" selected>Default</option>
但是当我提交表单时，选择的数组（courselist）被拼接并添加了一个空白选项以及上面的默认选项和剩余的courselist。
有没有办法只从courselist数组添加选项（没有角度空白），仍然可以发布它。
我试图发送默认设置 - ＆＃34; sDefault＆＃34;但出于某种原因，这并没有传递给指令。
基本上我不需要默认选择，并且能够发布到表单，简单的你认为？！ ng-options是一个问题，因为它不是单个项目输出，即{{first_name}} {{last_name}}，无论如何这也不会发布。
任何帮助表示赞赏。
更多信息：
感谢下面的Timcodes，我找到了问题的原因，但仍然没有解决方案。 Example working without $http
我给出的上述代码是为了避免大量的$ http。但我注意到使用带有api的真实版本会创建空白选择：
.controller("StudentController",function($scope,$http,$modal){
$scope.studentlist = function() {
$http.get('/api').
success(function(data) {
$scope.courselist = data;
});
};
$scope.studentlist();
});
$ scope.courselist输出 [{＆＃34;如first_name＆＃34;：＆＃34;米格尔＆＃34;＆＃34;姓氏＆＃34;：＆＃34;史密斯＆＃34;＆＃34; ID＆＃34; 10}]
如果我把它直接放入控制器：
$scope.courselist=[{"first_name":"Miguel","last_name":"Smith","id":10}]
它起作用，就像在plunker示例中一样，但是使用$ http它会创建一个空白的第一个选择选项。
解决方案：我决定将后端的courselist预加载到javascript变量而不是api中。这样，在创建selectedItem之前定义了列表。
我有兴趣听到角度解决方案。
答案 0 :(得分：0)
您可以使用＆＃39; As＆＃39;用于连接两个要聚集的值的语法。例如ng-options =＆＃34; a as（a.first + a.last）in a alist＆＃34;。您也可以使用ng-model设置默认值。为此，将ng-model初始化为默认值，就像首次运行控制器时调用的激活函数一样。然后，在拼接数组后保持空白值不会出现，将ng-model重置为另一个值。例如，你可以有一个名为selectedCourse的模型然后将其设置为课程数组中的第一个课程，然后当你调用add函数时，在完成任何ansync之后，然后拼接数组。将所选项重置为课程数组中的第一个课程。像下面的东西，也有链接插件
// js
app.directive('thisView', function() {
return {
restrict:"E",
scope: {
students:"=",
courselist:"=",
},
templateUrl: 'thisView.html',
controller: function($scope) {
//intialize selected course
$scope.selectedCourse = $scope.courselist[0];
$scope.remStudent = function(remId) {
$scope.students.splice( $.inArray(remId, $scope.students), 1 );
$scope.courselist.push(data);//data will be returned from http not relevant for question
};
$scope.addStudent = function() {
// pretending this is async op that returns a promise
$scope.students.push(data).then(function(){
var idx = $scope.courselist.indexOf($scope.selectedCourse);
$scope.courselist.splice(idx,1);
// reset slected course
$scope.selectedCourse = $scope.courselist[0];
});
};
}
}
//html
<form ng-submit="addStudent()">
<select name="test"
ng-options=
"course as (course.first_name + ' ' + course.last_name)
for course in courselist"
ng-model="selectedCourse" >
</select>
<input type="submit" class="btn btn-primary btn-lg" value="Add Student" />
</form>