使用AngularJs在表单中添加记录

时间:2016-08-23 07:26:10

标签: angularjs

目前我正在研究angularjs,我是角度的初学者。 我正在尝试创建一个具有创建按钮的表单,该按钮使用服务在服务器上创建记录。 角度代码是:

$scope.createNewRecord = function (record) {   
    var data = {
        "totalBudget": record.budget,
        "campaignId": record.name,
        "updateUser": null,
        "updateTime": 0,
        "advertiserId": record.advertiseId,
        "deleted": false,
        "createTime": new Date(),
        "budgetSpent": record.pricing,
        "name": null,
        "startTime": record.startTime,
        "createUser": null,
        "id": null,
        "endTime": record.endTime,
        "status": 'Initiated'
    };
    console.log(JSON.stringify(data));
    $http.post(SERVER_URL+'record/create', data).then(function (response) {
        console.log(response);
        alert('Record Created');
    });
};

});

html代码:

<form name="record" ng-submit="createNewRecord(record)">
        <div class="capainging-fields">
            <div class="col-md-6 input-feilds">
                <div class="input-group">
                    <label for="Record-name">Record Name:</label>
                    <input type="text" class="form-control" placeholder="" ng-model="record.name">
                </div>
                <div class="input-group">
                    <label for="email">Advertise:</label>
                    <select type="text" class="form-control" ng-model="record.advertiseId">
                        <option>test1</option>
                        <option>test2</option>
                        <option>test3</option>
                        <option>test4</option>
                        <option>test5</option>
                    </select>
                </div>
                <div class="input-group">
                    <label for="email">Budget:</label>
                    <select type="text" class="form-control" ng-model="record.budget">
                        <option>test1</option>
                        <option>test2</option>
                        <option>test3</option>
                        <option>test4</option>
                        <option>test5</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <label for="email">Start Date:</label>
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" class="form-control" id="dp4" ng-model="record.startTime">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group">
                    <label for="email">End Date:</label>
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" class="form-control" id="dp5" ng-model="record.endTime">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>

                </div>
                <div class="input-group input-feilds">
                    <label for="email">Pricing Method:</label>
                    <input type="text" class="form-control" placeholder="" ng-model="record.pricing">
                </div>
            </div>
        </div>
        <div class="targetting">
                <div class="input-group">
                    <label for="Targetting" class="target">Targeting:</label>
                    <div class="geography-container">
                        <label class="checkbox-inline geography" data-toggle="collapse" data-target="#targetting-collapse"><input type="checkbox" value="">Geography</label>
                        <div id="targetting-collapse" class="collapse">
                            <label class="checkbox-inline"><input type="checkbox" value="">Country</label>
                            <label class="checkbox-inline"><input type="checkbox" value="">States</label>
                        </div>
                    </div>
                    <div class="devices">
                        <label class="checkbox-inline geography" data-toggle="collapse" data-target="#devices-collapse"><input type="checkbox" value="">Devices</label>
                        <div id="devices-collapse" class="collapse">
                            <label class="checkbox-inline"><input type="checkbox" value="">catgory1</label>
                            <label class="checkbox-inline"><input type="checkbox" value="">catgory2</label>
                            <label class="checkbox-inline"><input type="checkbox" value="">catgory3</label>
                        </div>
                    </div>
                    <div class="browsers">
                        <label class="checkbox-inline geography" data-toggle="collapse" data-target="#browsers-collapse"><input type="checkbox" value="">Browser</label>
                        <div id="browsers-collapse" class="collapse">
                            <label class="checkbox-inline"><input type="checkbox" value="">catgory1</label>
                            <label class="checkbox-inline"><input type="checkbox" value="">catgory2</label>
                            <label class="checkbox-inline"><input type="checkbox" value="">catgory3</label>
                        </div>
                    </div>
                    <div class="days">
                        <div class="custome-day"><span>Day : </span></div>
                        <div class="week-days">
                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info" class="[ btn btn-default active ]">
                                        Sunday
                                    </label>
                                </div>
                            </div>
                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info2" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info2" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info2" class="[ btn btn-default active ]">
                                        Monday
                                    </label>
                                </div>
                            </div>
                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info3" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info3" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info3" class="[ btn btn-default active ]">
                                        Tuesday
                                    </label>
                                </div>
                            </div>
                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info4" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info4" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info4" class="[ btn btn-default active ]">
                                        Wednesday
                                    </label>
                                </div>
                            </div>
                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info5" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info5" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info5" class="[ btn btn-default active ]">
                                        Thursday
                                    </label>
                                </div>
                            </div>
                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info6" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info6" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info6" class="[ btn btn-default active ]">
                                        Friday
                                    </label>
                                </div>
                            </div>
                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info2" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info2" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info2" class="[ btn btn-default active ]">
                                        Saturday
                                    </label>
                                </div>
                            </div>
                            </div>
                    </div>
                    <div class="time">
                        <div class="custome-day"><span>Time : </span></div>
                        <div class="week-days">
                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info-new" id="fancy-checkbox-info-new" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info-new" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info-new" class="[ btn btn-default active ]">
                                        15-7-2016 to 17-8-2016
                                    </label>
                                </div>
                            </div>

                            <div class="[ form-group ]">
                                <input type="checkbox" name="fancy-checkbox-info-secondrange" id="fancy-checkbox-info-secondrange" autocomplete="off" />
                                <div class="[ btn-group ]">
                                    <label for="fancy-checkbox-info-secondrange" class="[ btn btn-info ]">
                                        <span class="[ glyphicon glyphicon-ok ]"></span>
                                        <span> </span>
                                    </label>
                                    <label for="fancy-checkbox-info-secondrange" class="[ btn btn-default active ]">
                                        12-7-2016 to 10-8-2016
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        <input type="submit" value="Create Record" />
    </form>

现在,当我运行文件时,它会生成弹出式“创建记录”#39;在页面加载时,我没有点击按钮创建活动。

请帮帮我们。我希望它将我的表单数据发布到服务器,控制器应该运行onClick of create record。

3 个答案:

答案 0 :(得分:0)

检查控制器可能在单击提交按钮之前调用该功能

答案 1 :(得分:0)

这是你拥有的所有代码吗?如果是这样,你会错过一些事情:

模块 (docs)

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
    public class ImageTest {
           public static void main(String args[]){
                  ImageTest imageTest = new ImageTest();
                  imageTest.testImage();
           }
        void testImage() {
        int x = 10;
        int y = 10;
        int w = 24;
        int h = 44;
        //String path = "D:images\\upload_final\\030311175258.jpg";
        //String path = "D:\\screens\\testcd.jpg";
        String path = "D:\\Vision\\tmpsvs\\New\\20F.TIF";
        System.out.println("Path===>"+path);
        BufferedImage out = null;
        BufferedImage image = null;
        try {
            image = ImageIO.read(new File(path));
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
             //out = image.getSubimage(x, y, w, h);
        try {
            out =ImageIO.read(new File(path)).getSubimage(x, y, w, h);
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }

        try {
            ImageIO.write(out, "TIF", new File(path));
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
           }
    }

将模块附加到DOM

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

控制器 (docs)

<body ng-app="myApp">

将控制器附加到DOM

function MyCtrl($scope) { ...  }

我根据您的代码(包括这些修改)制作了JS fiddle,似乎工作正常。

答案 2 :(得分:0)

我在这里创建了plunker

这是我改变了:

    <input type="submit" value="Create Record" ng-click="createNewRecord()" />

createNewRecord 现在获取记录模型值,如果您取消对帖子操作的评论,那么它应该提交数据。