gpt4 book ai didi

javascript - AngularJS 动态表单与 ng-repeat

转载 作者:行者123 更新时间:2023-11-28 04:13:01 25 4
gpt4 key购买 nike

我正在使用 AngularJS 动态表单。根据我的 userid 值,我使用 ng-repeat 生成了具有相同模型名称的多个表单字段。由于此 ng-repeat,我无法获取此输入模型值。在此示例中,我使用静态用户 ID 数据。

<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea>
</div>

<div class="col-md-3 ">
<label>Gender</label>

<select ng-model="gender" name="select2" required>
<option value="male">Male</option>
<option value="female">Female</option>

</select>
</div>
</div>

</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>

我的js代码

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.userid = [1, 2, 3];
$sope.adduser = function() {

}
});

我需要将对象数组发送到我的服务器。我的用户 ID 也是动态的,它有超过 100 个数据。我如何获取每个数据字段模型值?以及如何将这些模型数据转换为对象数组,例如我的示例服务器数据?

我期待这样的最终输出数据

var sampleServerData = [{
"userid": 1,
"manualcomment": "mycmt1",
"gender": "male"
}, {
"userid": 2,
"manualcomment": "mycmt2",
"gender": "male"
}, {
"userid": 3,
"manualcomment": "mycmt3",
"gender": "female"
}]

最佳答案

您应该将 textarea id 更改为 class 或在用户对象中创建一个 textarea id(更多内容见下文)。

如果您必须使用的 id 在数组中,则根据您的 ids 数组创建一个对象数组。

var ids = [1, 2, 3];
var users = ids.map(function(id) {
return {id: id, comment: "", gender: ""};
})

我想我有一个解决方案给你,我给你做了一个 jsbin 。确保点击使用 js 运行按钮,由于某种原因它不会在加载时运行。

HTML

<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="user in users">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
</div>

<div class="col-md-3 ">
<label>Gender</label>

<select ng-model="user.gender" name="select2" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>

</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>

JS

    var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.ids = [1, 2, 3];

$scope.users = $scope.ids.map(function(id) {
return {id: id, comment: "", gender: ""};
});

$scope.adduser = function() {
var data = $scope.users.map(function(user) {
return {
"userid": user.id,
"manualcomment": user.comment,
"gender": user.gender
}
});

console.log("data", data)
}
});

关于javascript - AngularJS 动态表单与 ng-repeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46104203/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com