选择angularjs的标签不在safari中工作

时间:2017-02-17 05:44:38

标签: angularjs-material

我已经用angularJS材料制作了一个简单的注册页面,我的问题是一个选择标签,它可以正常工作在Windows,Android手机除iPhone和Safari之外。 所以任何人都可以帮助我!

我的代码如下:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1">
        <title>Form | angularJs</title>

        <!-- Angular Material requires Angular.js Libraries -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
        <!-- Angular Material style sheet -->
        <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
        <link rel="stylesheet" href="https://material.angularjs.org/1.1.3/docs.css">

        <!-- Angular Material Library -->
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
        <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>


        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
        <link rel="stylesheet" href="w3.css">
        <script src="query.js">

        </script>
    </head>
    <body>
        <header class="w3-container w3-teal">
            <h1><center>School.com</center></h1>
        </header>
        <div class="container">
            <div class="well ng-scope" ui-view="content">
                <div ng-controller="ContactController">
                    <div class="row">
                        <form class="well" name="myForm">
                            <md-input-container class="md-block" flex-gt-sm>
                                <label>State</label>
                                <md-select ng-model="State" name="state" placeholder="Select State" style="text-indent: 6px; line-height: 30px;">
                                    <md-option value="pune">Pune</md-option>
                                    <md-option value="mumbai">Mumbai</md-option>
                                    <md-option value="nagpur">Nagpur</md-option>
                                    <md-option value="nashik">Nashik</md-option>
                                </md-select>
                                <div ng-messages="myForm.state.$error"
                                     ng-show="myForm.state.$dirty">
                                    <div ng-message="required">This is required!</div>
                                </div>
                            </md-input-container>
                            <br />
                            <input type="hidden" ng-model="newcontact.id" />
                            <md-button ng-disabled="(myForm.$invalid)&& action != 'VIEW'" ng-click="saveContact()" class="md-raised md-primary">Submit</md-button>
                            <md-button type="reset" class=" md-warn md-raised md-hue-2">Reset</md-button>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <footer class="w3-container w3-teal">
            <h5><center>Copyright &copy; School.com</center></h5>
        </footer>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

代码没有问题,只需更新此元标记即可。多数民众赞成!