分享

在 AngularJS 应用中处理单选框和复选框

 WindySky 2016-11-21

创建Angular表单

在这篇文章里,我们需要两个文件:index.html和app.js。app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方。首先我们创建AngularJS文件。

1
2
3
4
5
6
7
8
9
10
// app.js
var formApp = angular.module('formApp', [])
    .controller('formController'function($scope) {
   
        // we will store our form data in this object
        $scope.formData = {};
         
    });

在这个文件里,我们所做的就是创建Angular应用。其中我们还创建了一个控制器和一个用来保存所有表单数据的对象。

下面我们看看index.html文件,在这个文件里,我们创建了表单,然后进行了数据绑定。我们使用了Bootstrap快速地对页面进行布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<-- index.html -->
<!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            { margin-bottom:50px; }
    </style>
    <!-- JS -->
    <!-- load up angular and our custom script -->
    <script src="http://code./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>
         
        <!-- =============================================== -->
        <!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
        <!-- =============================================== -->
         
        <!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
        <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>
     
</div>
</body>
</html>

创建完成之后,我们就有了具有name输入的表单了。如果一切都按照我们设想的运行,那么如果你在name输入中键入内容,那么你应当可在下面的<pre>标签段看到所输入的内容了.

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多