目前我正在研究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。
答案 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 现在获取记录模型值,如果您取消对帖子操作的评论,那么它应该提交数据。