将输入数据从引导程序表单发送到脚本中

Question

我是angularJS和bootstrap的新手，我已经制作了一个引导表单来输入详细信息，但是我无法将表单中的数据转换为Javascript文件，因此我可以使用这些数据。

---

<div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
        <form class="form-horizontal">
            <fieldset>
                <!-- Text input-->
                <div class="control-group">
                    <label class="control-label" for="db_short_Name">Database Short Name</label>
                    <div class="controls">
                        <input size="40" id="db_short_Name" name="db_short_Name" placeholder="Enter database short name" class="input-xlarge" type="text">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="db_display_Name">Database Display Name</label>
                    <div class="controls">
                        <input size="40" id="db_display_Name" name="db_display_Name" placeholder="Enter database display name" class="input-xlarge"  type="text">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="db_max_Size">Database Max Size</label>
                    <div class="controls">
                        <input size="80" id="db_max_Size" name="db_max_Size" placeholder="Enter maxiumun size" class="input-xlarge" type="number">
                    </div>
                </div>
                </br>
                <!-- Button -->
                <div class="control-group">
                    <div class="controls">
                        <button id="button1_Create" name="button1_Create" class="btn btn-primary">Create</button>
                        <button id="button2_View" name="button2_View" class="btn btn-default">View</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>

更多信息：使用此表单，用户将能够使用Websql创建浏览器数据库。创建数据库的主要组成部分是：

var shortName= 'ABC';
var version = '0.1';
var displayName = 'DATABASE'
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);  

现在我只想用alert（）显示用户输入的内容。

Answer 1

请参见此处：http://jsfiddle.net/BL6QP/

查看：

<div id="collapseOne" class="panel-collapse collapse" ng-app="app">
    <div class="panel-body" ng-controller="myCtrl">
        <form class="form-horizontal">
            <fieldset>
                <!-- Text input-->
                <div class="control-group">
                    <label class="control-label" for="db_short_Name">Database Short Name</label>
                    <div class="controls">
                        <input size="40" id="db_short_Name" name="db_short_Name" placeholder="Enter database short name" class="input-xlarge" type="text" ng-model="mymodel.shortname">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="db_display_Name">Database Display Name</label>
                    <div class="controls">
                        <input size="40" id="db_display_Name" name="db_display_Name" placeholder="Enter database display name" class="input-xlarge" type="text" ng-model="mymodel.displayname">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="db_max_Size">Database Max Size</label>
                    <div class="controls">
                        <input size="80" id="db_max_Size" name="db_max_Size" placeholder="Enter maxiumun size" class="input-xlarge" type="number" ng-model="mymodel.maxsize">
                    </div>
                </div>
                </br>
                <!-- Button -->
                <div class="control-group">
                    <div class="controls">
                        <button id="button1_Create" name="button1_Create" class="btn btn-primary" ng-click="create()">Create</button>
                        <button id="button2_View" name="button2_View" class="btn btn-default">View</button>
                    </div>
                </div>
            </fieldset>
        </form>
                <pre>{{mymodel | json}}</pre>
    </div>
</div>

JS：

var app = angular.module('app',[]);

app.controller('myCtrl', function($scope){

    $scope.mymodel = {};


    $scope.create = function(){
    alert($scope.mymodel);


    }

});