Angular Form Submit built with ng-repeat
Angular Form Submit built with ng-repeat
我正在尝试使用Angular构建一个表单,该表单使用ng-repeat基于mongoDB中的字段创建输入。 我是角度的新手,所以我不太确定如何正确执行它。
以下是简化的 html:
<form ng-controller="SettingsFormCtrl as form" ng-submit="form.processForm()" novalidate>
<div class="tabs">
<div class="usertab" ng-repeat="(field,value) in formData.usertab">
<input ng-model="{{field}}" name="{{field}}" value="{{value}}" required>
<input type="submit">
</div>
<div class="infotab" ng-repeat="(field, value) in formData.infotab">
<input ng-model="{{field}}" name="{{field}}" value="{{value}}" required>
<input type="submit">
</div>
</div>
</form>
这是应用程序.js:
function SettingsFormCtrl($scope,$http){
var profile = this;
$http.get("api/profile/").success(function(response) {
profile.result = response;
});
$scope.formData = profile.result;
$scope.processForm = function() {
$http.post('pi/profile/submit', $scope.formData) .success(function(data) {
console.log(data);
if (!data.success) {
// if not successful, bind errors to error variables
alert('succes!');
} else {
// if successful, bind success message to message
alert('no');
}
});
};
}
angular
.module('inspinia')
.controller('ProfileCtrl',ProfileCtrl)
.controller('SettingsFormCtrl',SettingsFormCtrl)
这是.get
数据:
{
"usertab":
{
"username":"Bob",
"email":"bob@email.com"
},
"infotab":
{
"phone":"988-333-1245",
"age":"44"
}
}
任何帮助绝对不胜感激。
你的问题结构不好,但我注意到一些可能导致你的代码不起作用的错误
- 在您看来,在属性中绑定值时,不需要添加
{{}}
。Angular 将自动尝试将其解析为表达式。 - 在你的
angular.module
我不确定这是否是整个项目,但是要声明(创建)一个模块,你需要添加一个空数组[]
或一个填充了你的依赖项的数组到模块,没有它,angular 会认为你正在尝试注入一个模块,当找不到它时, 它会抛出错误。 - 另一个关键的事情是,如果你做错
$scope.formData
,你把来自.get
的响应存储在一个变量中,这超出了角度范围。当结果可用时,angular 将不知道,因此要完成这项工作,您需要将其直接存储到$scope.formData
以便 angular 会在结果可用时立即更新视图。
为此创建了一个 plnkr,反映了我所做的更改
我希望这能回答你的问题。
相关文章:
- JavaScript array.push (object) with Angular ng-repeat 无法按预期运
- Angularjs with dynamic model in ng-repeat
- AngularJS Function with ng-if inside ng-repeat
- angularjs $index when ng-hide with ng-repeat
- Angularjs ng-repeat with conditions
- Susy gallery with AngularJS (ng-repeat) - 不填补 ng-hide 的空白
- Nested ng-repeat with AngularJS
- Problems with ng-repeat, $scope, $http
- AngularJS : $compile with nested ng-repeat
- AngularJS ng-repeat combined with ng-click=orderByField
- Angular-js ng-repeat with complex orderBy
- Angularjs ng-repeat with new element
- Ng-repeat with ng-hide或在控制器中执行该工作以提高性能
- AngularJS: ng-repeat combined with JQuery
- AngularJS using $sce.trustAsHtml with ng-repeat
- 禁用ng-repeat with button使用angularjs,当我重新加载禁用不工作
- 如何使用angularjs禁用ng-repeat with button
- Angular Form Submit built with ng-repeat
- AngularJS - Trouble with ng-repeat
- Angular-nvD3(krispo) single line chart with ng-repeat