angularjs - how can update my form in modal in angular js? -
hello creating mean application in want update record.the record in table format , when user click on edit button modal appears database values on input text box . have not problem in updating field stuck in updating video part. how can it?? html form (i use single form creating , updating)
<div class="panel panel-default"> <div class="panel-heading">add videos</div> <div class="panel-body"> <div style="margin:10px;"> <form name="addvideos" class="" method="post"> <div class="alert alert-success" ng-show="success" style="background-color:black;"> <strong>successfully updated!!</strong> redirecting videos page. </div> <div class="form-group"> <label>title</label> <input type="text" class="form-control" ng-model="form.title" required name="title" placeholder="enter title"> </div> <div class="form-group"> <label>description</label> <textarea class="form-control" ng-model="form.description" required name="description" rows="5" id="comment" placeholder="enter description"></textarea> </div> <div class="form-group"> <label>author</label> <input type="text" class="form-control" required ng-model="form.author" name="author" id="exampleinputpassword1" placeholder="enter author name"> </div> <div class="form-group"> <label>duration</label> <input type="text" class="form-control" required ng-model="form.duration" name="duration" id="exampleinputpassword1" placeholder="enter author name"> </div> <!-- <div class="form-group"> <label>ispublic</label> <input type="text" class="form-control" required ng-model="form.public" name="public" id="exampleinputpassword1" placeholder="enter author name"> </div> --> <div class="form-group"> <label for="sel1">ispublic:</label> <select class="form-control" ng-model="form.public" > <option ng-selected="test==false" value="0">0</option> <option ng-selected="test==true" value="1">1</option> </select> </div> <div class="row"> <div class="col-md-2" style="margin-top: 19px;" > <!-- <!ng-hide="display" !> --> <input type="file" accept="video/*" file-model="myfile" required/> </div> <div class="col-md-8" style="margin-left:29px;"> <button ng-click="add == true ? uploadfile(form) : updatevideo()" class="btn btn-danger" ng-disabled="addvideos.$invalid" style="margin:10px;">submit</button> </div> </div> <progress value="{{progressbar}}" max="100" ng-show="view"> </progress> <div class="progress" ng-show="view" style="width:40%;"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{progressbar}}" aria-valuemin="0" aria-valuemax="100" style="width:{{progressbar}}%"> {{progressbar}}% complete (success) </div> </div> </form> </div> </div> </div> my controller
function generateuuid() { var d = new date().gettime(); var uuid = 'xxxxxxx.mp4'.replace(/[xy]/g, function(c) { var r = (d + math.random() * 16) % 16 | 0; d = math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).tostring(16); }); return uuid; }; var localstorageapp = angular.module('bluradmin.pages.videos.allvideos'); localstorageapp.controller('tblectrl',['$rootscope','$scope', '$filter', 'editableoptions', 'editablethemes', '$window', '$http', '$uibmodal', 'baprogressmodal','localstorageservice','$state','$rootscope', function ($rootscope,$scope, $filter, editableoptions, editablethemes, $window, $http, $uibmodal, baprogressmodal,localstorageservice,$state,$rootscope) { var token = localstorageservice.get('token') if(token == null){ $window.location.href = '/index.html'; } token = token.substring(1, token.length - 1); $http.get("/api/loggedin/"+token).then(function(response) { console.log("response"+json.stringify(response.data.error)) if(response.data.error == true){ localstorageservice.remove('token') $window.location.href = '/index.html'; } }); $scope.users = []; $scope.display=true; // $scope.form = []; //$scope.bool = null; $scope.id = 0; $scope.redirect = function () { $window.location.href = "#/videos/addvideos"; } $http.get("/api/all-videos").then(function(response) { $scope.users = response.data.data; console.log(response.data.data); }); $scope.open = function(e,id,page, size, addoredit) { $scope.updatevideo() = function(){ alert('working'); } // $scope.bool = bool $scope.id = id $scope.display=true; var modalinstance = $uibmodal.open({ // animation: $ctrl.animationsenabled, // arialabelledby: 'modal-title', // ariadescribedby: 'modal-body', templateurl: page, controller: 'modalinstancectrl', controlleras: '$scope', size: size, // appendto: parentelem, resolve: { users: function () { return $scope.users; }, id: function () { return $scope.id; } } }); modalinstance.result.then(function (selecteditem) { // console.log("selecteditem"+json.stringify(selecteditem.data)); $scope.users = selecteditem; // $scope.users.push(selecteditem.data) }, function () { $log.info('modal dismissed at: ' + new date()); }); }; $scope.removevideo = function(id, $index) { var m = parseint(id); if ($window.confirm("are sure want delete?") == true) { $http.post("/api/delete-video/" + m).then(function(response) { $scope.users.splice( $index, 1 ); }); // $window.location.reload() } else { } } $scope.openprogressdialog = baprogressmodal.open; // editableoptions.theme = 'bs3'; // editablethemes['bs3'].submittpl = '<button type="submit" class="btn btn-primary btn-with-icon"><i class="ion-checkmark-round"></i></button>'; // editablethemes['bs3'].canceltpl = '<button type="button" ng-click="$form.$cancel()" class="btn btn-default btn-with-icon"><i class="ion-close-round"></i></button>'; } ]) var qwe=''; angular.module('bluradmin.pages.users').directive('filemodel', ['$parse', function($parse) { return { restrict: 'a', link: function(scope, element, attrs) { var model = $parse(attrs.filemodel); var modelsetter = model.assign; element.bind('change', function() { scope.$apply(function() { modelsetter(scope, element[0].files[0]); qwe= element[0].files[0]; console.log(element[0].files[0].name); }); }); } }; }]).service('hexafy', ['$http', '$window','$timeout', function($http, $window,$timeout) { this.myfunc = function (x) { return x.tostring(16); } // information in videos this.getall = function(t,x){ console.log(x); $http.get("/api/get-video/"+x).then(function(response) { console.log(response); // console.log(response.data.data); console.log(response.data.response.data); t.form = response.data.response.data; // $scope.form.public = response.data.response.data.ispublic; t.test = response.data.response.data.ispublic; // console.log($scope.form.level); // $scope.form.level = $scope.levels[response.data.response.data.level - 1]; // console.log($scope.form.level); }); } this.display = function(p){ console.log(p); console.log(qwe); } this.updatevideo = function(){ console.log(qwe); alert('working'); } }]).controller('modalinstancectrl', ['$scope', '$uibmodalinstance', '$http', 'id', '$timeout','hexafy' ,function ($scope, $uibmodalinstance,$http,id,$timeout,hexafy) { $scope.form = {}; $scope.test = ''; // $scope.b = bool; console.log($scope.b); $scope.display=true; console.log(hexafy.myfunc(187)); hexafy.getall($scope,id); console.log("id value "+id) var file = $scope.myfile; console.log(file); }]) how detect file in modal??
Comments
Post a Comment