0
我創建了一個庫存應用程序，用戶可以選擇添加新產品或編輯現有產品。這兩個選項都會顯示相同的模式窗口，並且我希望它在用戶單擊提交後自動關閉。提交後使用angularjs關閉引導模態窗口
下面是我的代碼的一部分，我的整個代碼是在這裏：http://codepen.io/andresq820/pen/LWGKXW
HTML
<div class="modal fade" id="editItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{title(item.code)}}</h4>
</div>
<div class="modal-body">
<form name="myEditForm" ng-submit="editProduct(item)">
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" minlength="3" class="form-control" name="code" id="code"
ng-model="item.code" ng-disabled="false" ng-pattern="/^[a-zA-Z0-9]*$/">
<span ng-show="myEditForm.code.$error.pattern">Code can only be alphanumeric.</span> </br>
<span ng-show="myEditForm.code.$error.minlength">Code has to be at least 3 characters</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" name="description" id="description" ng-model="item.description" required>
<span ng-show="myEditForm.description.$touched && myEditForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="number" class="form-control" name="amount" id="amount" size="5" maxlength="5"
ng-model="item.amount" ng-pattern="/^[0-9]{1,7}$/">
<span ng-show="myEditForm.amount.$error.pattern">Only whole numbers are allowed</span>
</div>
<div class="form-group">
<label for="newImage">{{loadImg}}</label>
<input type="file" class="form-control" name="newImage" id="newImage" ng-model="item.image">
</div>
<div class="form-group" ng-show="displayRadioBtns">
<label for="radio">Type:</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="item.type" value="in">In</label>
<label><input type="radio" name="optradio" ng-model="item.type" value="out">Out</label>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
<input type="submit" class="btn btn-primary pull-right" value="Submit" ng-disabled="myEditForm.$invalid"/>
</div>
</form>
</div>
</div>
</div>
</div>
ANGULARJS
$scope.editProduct = function(item){
var index = $scope.items.indexOf(item);
console.log(index);
console.log(item);
console.log(item.code.valueOf());
if(index == -1){
console.log('new item');
$scope.item.code = item.code;
$scope.item.description = item.description;
$scope.item.in = item.amount;
$scope.item.out = 0;
$scope.item.createdOn = Date.now();
$scope.items.push($scope.item);
$scope.item = {};
}else{
console.log('edit item');
console.log(item);
console.log(item.type);
console.log($scope.item.type);
console.log(index);
$scope.items[index].code = item.code;
console.log($scope.items[index].code);
$scope.items[index].description = item.description;
console.log($scope.items[index].description);
$scope.items[index].image = item.image;
if($scope.item.type == 'in'){
console.log($scope.item.type);
console.log(typeof($scope.items[index].in));
console.log(typeof($scope.item.amount));
console.log(typeof(item.amount));
$scope.items[index].in += item.amount;
console.log($scope.items[index].in);
$scope.item = {};
}else if($scope.item.type == 'out'){
console.log($scope.item.type);
$scope.items[index].out += $scope.item.amount;
$scope.item = {};
}else{
alert("Type is a required field");
return;
};
}
};