gpt4 book ai didi

angularjs - 如何将不同的输入字段(文本,日期,选择)值传递到AngularJS中的方法中

转载 作者:行者123 更新时间:2023-12-03 06:50:45 25 4
gpt4 key购买 nike

我有不同的输入字段值,我需要将所有字段值传递到 applyLeave() 方法。
我尝试通过在 init() 方法中初始化像 $scope.value=[] 这样的数组,但什么也没得到。所以我删除了该代码。
有什么建议吗?

                <body ng-app="intranet_App" ng-controller="myCtrl" ng-init="init()">
<div>
<label>Leave Type</label>
<select type="text" id="levType" ng-model="selectedvalue" ng-blur="leaveBalance(selectedvalue)"><option value="" selected="selected">Select</option><option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option></select>
</div>
<div>
<label>Balance</label>
<input type="text" id="levTaken" readonly="readonly" ng-model="noOfLevs[0].balance_count">
</div>
<div>
<label>From Date</label>
<input type="date" id="levFrom">
</div>
<div>
<label>To Date</label>
<input type="date" id="levTo" ng-blur="calculateDays()">
</div>
<div>
<label>Duration(Days)</label>
<input type="text" id="levDuration" readonly="readonly">
</div>
<div>
<label>Supporting Document</label>
<input type="file" id="uploadDoc">
</div>
<div>
<label>Comments</label>
<textarea id="LevReason" rows="2"></textarea>
</div>
<div class="row pull-right btnMarginTop">
<button class="btn btn-primary btnMarRight" ng-click="applyLeave(),">Apply</button>
</div>
</body>
<script>
var app = angular
.module("intranet_App", [])
.controller("myCtrl", function ($scope, $http) {
$scope.init = function () {
$scope.value= [];
$http.post("/leave/getLeaveTypeList").then(function (response) {
$scope.leaveTypes = response.data;
})
}
$scope.applyLeave = function () {
console.log()
}
})

</script>

最佳答案

您可以/应该用 <form name="yourName"> 包裹您的表单或<ng-form name="yourName">标签。正如另一个答案所述,您应该考虑构建 Angular 形式。 https://docs.angularjs.org/guide/forms

将您的数据绑定(bind)到 ng-model 也将极大地帮助您的事业。我创建了一个 jsfiddle,并进行了一些细微的更改(可能还进行了简化)。

我 mock 了您的数据调用,因此下拉菜单有效。当您单击该按钮时,它将 console.log来自模型的数据。

http://jsfiddle.net/1c8zudve/2/ (已更新)

<body ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<div>
<label>Leave Type</label>
<select type="text" id="levType" name="leaveType" ng-model="leave.leaveType" ng-blur="leaveBalance(leave.leaveType)">
<option value="" selected="selected">Select</option>
<option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option>
</select>
</div>
<div>
<label>Balance</label>
<input type="text" id="levTaken" readonly="readonly" ng-model="leave.balance">
</div>
<div>
<label>From Date</label>
<input type="date" id="levFrom" name="fromDate" ng-model="leave.fromDate">
</div>
<div>
<label>To Date</label>
<input type="date" id="levTo" name="toDate" ng-model="leave.toDate">
</div>
<div>
<label>Duration(Days)</label>
<input type="text" id="levDuration" readonly="readonly" ng-model="leave.duration">
</div>
<div>
<label>Supporting Document</label>
<input type="file" id="uploadDoc" ng-model="leave.document">
<!-- ^ this will requiring some more code to make it work as expected -->
</div>
<div>
<label>Comments</label>
<textarea id="LevReason" rows="2" ng-model="leave.reason"></textarea>
</div>
<div class="row pull-right btnMarginTop">
<button class="btn btn-primary btnMarRight" ng-click="applyLeave()">Apply</button>
</div>
</body>

和修改后的脚本

              var app = angular.module("myApp", [])
.controller("myCtrl", function($scope, $http) {
$scope.init = function() {
$scope.leave = {
balance: 120,
duration: 25
};
$scope.value = [];

$http.post("/leave/getLeaveTypeList").then(function(response) {
$scope.leaveTypes = [{
Name: "test 1",
id: 1
}, {
Name: "test 2",
id: 2
}]
//$scope.leaveTypes = response.data;
})
}
$scope.applyLeave = function() {
console.log($scope.leave)
}
})

关于angularjs - 如何将不同的输入字段(文本,日期,选择)值传递到AngularJS中的方法中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44563172/

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