Question

在我的下拉列表下面

在firefox，chrome中正常工作。但在Internet浏览中选择2值时，下拉框（第一次）仅选择第一个值，提前致谢

IE中的

用于参考以下链接：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.users = [
        {id: 1, name: 'Me'},
        {id: 2, name: 'You'}
    ];
});

app.directive('select', function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        priority: 10,
        link: function postLink(scope, elem, attrs, ctrl) {
            if (!ctrl) { return; }
            var originalRender = ctrl.$render.bind(ctrl);
            ctrl.$render = function () {
                originalRender();
                if (elem.val() === '?') {
                    ctrl.$setViewValue(undefined);
                }
            };
        }
    };
});

＆＃13;

.error {
    color: Red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-form="form1">
    <select name="select1"
            ng-model="userId" 
            ng-options="user.id as user.name for user in users"
            ng-init="userId=3"
            required>
    </select>
    <div class="error" ng-show="form1.select1.$invalid">Required field !</div>
    <div class="error" ng-show="form1.$invalid">Invalid form !</div>
    <br />
     <button ng-click="userId=1;">Set valid value</button>
<button ng-click="userId=3;">Set invalid value</button>
<hr />
    <hr />
    <pre>userId: {{userId}}</pre>
</div>

＆＃13;

Answer 1

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.users = [
        {id: 1, name: 'Me'},
        {id: 2, name: 'You'}
    ];
});

app.directive('select', function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        priority: 10,
        link: function postLink(scope, elem, attrs, ctrl) {
            if (!ctrl) { return; }
            var originalRender = ctrl.$render.bind(ctrl);
            ctrl.$render = function () {
                originalRender();
                if (elem.val() === '?') {
                    ctrl.$setViewValue(undefined);
                }
            };
        }
    };
});

＆＃13;

.error {
    color: Red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-form="form1">

  <select ng-model="userId">
    <option ng-repeat="user in users"
            value="{{user.id}}">
      {{user.name}}
    </option>
</select>
  
    
    <div class="error" ng-show="form1.select1.$invalid">Required field !</div>
    <div class="error" ng-show="form1.$invalid">Invalid form !</div>
    <br />
    <button ng-click="userId=1;">Set valid value</button>
    <button ng-click="userId=3;">Set invalid value</button>
    <hr />
    <pre>userId: {{userId}}</pre>
</div>

＆＃13;

Answer 2

在选择列表中添加一个空选项。

<select name="select1"
  ng-model="userId" 
  ng-options="user.id as user.name for user in users"
  ng-init="userId=3"
  required>
  <option value=""></option>
</select>

但请注意，您可能需要使用它来使无效逻辑按预期工作。

使用AngularJs选择在IE中不起作用的框值

2 个答案: