angularjs填写表单

https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms

<!DOCTYPE html>
<html>
<head>

    <!-- CSS -->
    <!-- load up bootstrap and add some spacing -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        body         { padding-top:50px; }
        form, pre    { margin-bottom:50px; }
    </style>

    <!-- JS -->
    <!-- load up angular and our custom script -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="app.js"></script>
</head>

<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">

    <h2>Angular Checkboxes and Radio Buttons</h2>

    <form>
    
        <!-- NAME INPUT -->
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" name="name" ng-model="formData.name">
        </div>
        
        <!-- MULTIPLE CHECKBOXES -->
        <label>Favorite Colors</label>
        <div class="form-group">
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.colors.red"> Red
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.colors.blue"> Blue
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.colors.green"> Green
            </label>
        </div>
        
        <!-- CUSTOM VALUE CHECKBOXES -->
        <label>Personal Question</label>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
                Are you awesome?
            </label>
        </div>
        
        <!-- RADIO BUTTONS -->
        <label>Chicken or the Egg?</label>
        <div class="form-group">
            <div class="radio">
                <label>
                    <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">
                    Chicken
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">
                    Egg
                </label>
            </div>
        </div>
        
        <button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
        
    </form>
    
    <!-- SHOW OFF OUR FORMDATA OBJECT -->
    <h2>Sample Form Object</h2>
    <pre>
        {{ formData }}
    </pre>
    
    <footer class="text-center">
        <p>View the <a href="http://scotch.io/tutorials/javascript/handling-checkboxes-and-radio-buttons-in-angular-forms">tutorial</a> by <a href="http://scotch.io">scotch.io</a></p>
        
        <h4>Other Angular Form Tutorials</h4>
        <p><a href="http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way">Submitting AJAX Forms: The AngularJS Way</a></p>
        <p><a href="http://scotch.io/tutorials/javascript/angularjs-form-validation">AngularJS Form Validation</a></p>
    </footer>
    
</div>
</body>
</html>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。