角度中select / option标签中的奇怪行为

时间:2015-11-26 05:06:07

标签: javascript angularjs

这是我的代码段:

<select class="form-control" name="" id="" ng-model="offerId">
    <option value="">Choose</option>
    <option ng-repeat="offer in offers " value="{{ offer.id }}"
            ng-selected="offerId == offer.id">
        {{offer.supplier.name}}
        ({{offer.request.name}})
    </option>
</select>

它按预期工作。 问题或奇怪的行为是,如果我从其他组件/触发器更改ngModel(offerId),列表会添加一个新的空格选项;它的行为与默认的“选择”选项一样,当从选择/选项中选择任何选项(包括空白选项)时,空格选项消失,其他功能也一样,只是空白空间。

我也使用过ngOptions但功能已经改变了,所以我想坚持这个实现。

这是一个功能吗?

一些代码段:

$scope.clearAttachedFiles = function () {
$scope.attachedFiles = {uploads: null, links: null};
};
$scope.$watch('offerId', function (a, b) {
if ($scope.offerId) {
offerId = $scope.offerId;
}
if ((typeof a == 'undefined' || typeof a == 'null') && (typeof b == 'undefined' || typeof b == 'null')) {
return;
}
if (a === '') {
$scope.level = 'EVENT';
$scope.privateMessage = true;
$scope.offer = null;
}
else {
$scope.level = 'OFFER';
$scope.privateMessage = false;
angular.forEach($scope.offers, function (offer) {
if (offer.id == a) {
$scope.offer = offer;
}
});
}
$scope.getPaginatedActivities();
$scope.resetActivitiesList();
$scope.currentPage = 1;
});

1 个答案:

答案 0 :(得分:0)

你使用的方式错误,ng-options是有原因的。

当您使用ng-repeat时,您正在为阵列中的每个选项添加一个观察器,并且性能可能非常糟糕。同时执行value = {{}}会有问题,因为它不是正确的方法,取决于编译时间和其他因素,select可以将{{}}作为值而不是评估值表达。可能是选择空白的原因。

使用ngOptions,灵活且易于使用。这里是文档:https://docs.angularjs.org/api/ng/directive/ngOptions

询问您与之相关的任何问题!!!