我values在选择中动态生成了一些：
<select ng-model="selectedValue" ng-options="o.id as o.name for o in values"></select>
我有selectedValue它保存选定的值。我希望它更新到null或不再存在undefined于.selectedValuevalues
我可以清除selectedValuein$scope.$watch(values)但是有更好的解决方案吗？
基本上我想避免这种情况在这个 plunker中：
我希望它是“选定的值：null”或类似的东西。
您可以创建一个指令，使选择以您想要的方式运行。然后 HTML 将更改为：
<select clearable ng-model="selectedValue" ng-options="o.id as o.name for o in values"></select>
该指令的 JS 将是：
app.directive('clearable', ['$parse',function($parse){
return {
restrict : 'A',
scope : {
'ngModel' : '=',
'ngOptions' : '@'
},
require: ['select','?ngModel'],
link : function(scope, elem, attr,ctrl){
// Regex copied from the Angular Source
var NG_OPTIONS_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
var match = scope.ngOptions.match(NG_OPTIONS_REGEXP);
var valuesFn = $parse(match[7]), //Options list
key = match[1].split('.')[1]; //Property in options list
scope.$watch(
function(){
// Watch for when the options list changes
return valuesFn(scope.$parent);
},
function(newList){
var isFound, i,
currentModelVal = scope.ngModel;
// Iterate through the new list to see if the current value is present
for(i=0;i<newList.length;i++){
if (newList[i][key] === currentModelVal){
isFound = true;
break;
}
}
// If not found, reset the ng-model value to null
if (!isFound){
ctrl[1].$setViewValue(null);
}
}
);
}
}
}]);
请参阅http://plnkr.co/edit/yAk9YSoMf88rtTqLXTiI?p=preview上的 Plunker
您可以使用具有空值的选项，当未选择任何项目时，模型将设置为空
检查这个
<option value="">--select--</option>