Angular js $scope is not working inside Jquery function - javascript

I'm using Sweet alert for alert messages. I have confirmation alert box is there, after confirmation i have disable my content but that is not disable $scope is not working inside swal() if clicked twice it is working.how can i make it work.
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://limonte.github.io/sweetalert2/dist/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="http://limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body ng-app="app" ng-controller="myController">
Supplier ID:<input type="text" ng-model="supplierID" ng-disabled="disable"/><br>
Series ID:<input type="text" ng-model="seriesID" ng-disabled="disable"/><br>
SKU ID:<input type="text" ng-model="skuID" ng-disabled="disable"/><br><br>
<div class="action-keys">
<button class="btn btn-default" ng-click="enable()" ng-disabled="!disable">Enable</button>
<button class="btn btn-default" ng-click="disableCall()" ng-disabled="disable">Disable</button>
</div>
</body>
and my myscript.js:
angular.module('app', [])
.controller('myController', function($scope) {
$scope.disable = false;
$scope.disableCall = function () {
swal(
{
title: 'Warning',text: 'Are you want to disable?',type: 'warning',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',
confirmButtonText: 'Yes',cancelButtonText: 'No',confirmButtonClass: 'confirm-class',cancelButtonClass: 'cancel-class',allowOutsideClick : false
},function(isConfirm) {
if (isConfirm) {
$scope.skuID = '';
$scope.seriesID = '';
$scope.supplierID = '';
$scope.disable = true;
}else{
return;
}
});
}
$scope.enable = function () {
$scope.skuID = '';
$scope.seriesID = '';
$scope.supplierID = '';
$scope.disable = false;
}
});
This my sample code enable is working fine, disable function inside confirm not working. Please help on this. Thanks in advance.

Just use $scope.$apply when something happening outside of angular. Notice the call
$scope.$apply(function(){
//everything here will trigger digest cycle
//everything...
});
angular.module('app', [])
.controller('myController', function($scope) {
$scope.disable = false;
$scope.disableCall = function () {
swal(
{
title: 'Warning',text: 'Are you want to disable?',type: 'warning',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',
confirmButtonText: 'Yes',cancelButtonText: 'No',confirmButtonClass: 'confirm-class',cancelButtonClass: 'cancel-class',allowOutsideClick : false
},function(isConfirm) {
if (isConfirm) {
$scope.$apply(function(){
$scope.skuID = '';
$scope.seriesID = '';
$scope.supplierID = '';
$scope.disable = true;
});
}else{
return;
}
});
}
$scope.enable = function () {
$scope.skuID = '';
$scope.seriesID = '';
$scope.supplierID = '';
$scope.disable = false;
}
});
<link rel="stylesheet" href="http://limonte.github.io/sweetalert2/dist/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="http://limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>
<div ng-app="app" ng-controller="myController">
Supplier ID:<input type="text" ng-model="supplierID" ng-disabled="disable"/><br>
Series ID:<input type="text" ng-model="seriesID" ng-disabled="disable"/><br>
SKU ID:<input type="text" ng-model="skuID" ng-disabled="disable"/><br><br>
<div class="action-keys">
<button class="btn btn-default" ng-click="enable()" ng-disabled="!disable">Enable</button>
<button class="btn btn-default" ng-click="disableCall()" ng-disabled="disable">Disable</button>
</div>
</div>

Related

how to reset a form in angular 1.5

I have this markup
how can i reset it in my corresponding component?
<form name="voiceForm" novalidate>...</form>
I have tried:
this.voiceForm.$setPristine();
self.voiceForm.reset();
but got an error voiceForm is not defined.
this is my component:
(function (app) {
app.component('voiceFormComponent', {
templateUrl: 'partials/voice-form.html',
controller: ['$scope', '$state', '$stateParams',
function ($scope, $state, $stateParams) {
var self = this;
console.log("in voice prompt component");
self.addVoice = function () {
self.voiceForm.$setPristine();
$state.go("add");
}
You can pass the form and call setPristine
var app = angular.module('formReset', []);
app.controller('MainCtrl', function() {
this.data = {
name: ''
};
this.reset = function(form) {
this.data.name = '';
form.$setPristine();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="formReset">
<head>
<title>form.$submitted</title>
<script src="http://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl">
<form name="form" novalidate>
<input name="name" ng-model="ctrl.data.name" placeholder="Name" required />
<input type="submit" />
<button type="button" class="button" ng-click="ctrl.reset(form)">Reset</button>
</form>
<pre>
Submitted: {{form.$submitted}}
</pre>
</div>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myfrom">
<input type="text" ng-model="data.name">
<input type="text" ng-model="data.phone">
<input type="text" ng-model="data.city">
<input type="button" ng-click="reset_from()" value="reset">
</form>
{{data}}
</body>
</html>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = {name:"Sahed sawon",phone:"8801714999720",city:"Dhaka"};
$scope.reset_from = function() {
$scope.data = {};
}
});
</script>
I had a similar problem when I had a form within a form (which isn't allowed) and the fix was to use ng-form for the sub-form instead. Perhaps try ng-form?

angularjs cookies some issue

i am trying to save the value of calculator's tab when you reload the page and set the button to save and put value in calculator ( sry for broken english ).
I just can not link the calculator's tab and cookies.
> <!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-cookies.js"></script>
</head>
<body ng-controller="kyk">
<p>{{ $cookies.get('cookie') }}</p>
<input type="text" ng-model="cookieVal">
<button ng-click="setCookie(cookieVal)">update</button>
<div ng-controller="CalculatorController">
<br> <span id="myFavorite" >{{formula.join('')}}</span> <br><br><br>
<button ng-click="add(7)">7</button>
<button ng-click="add(8)">8</button>
<button ng-click="add(9)">9</button>
<button ng-click="add('/')">/</button><br>
<button ng-click="add(4)">4</button>
<button ng-click="add(5)">5</button>
<button ng-click="add(6)">6</button>
<button ng-click="add('*')">*</button><br>
<button ng-click="add(1)">1</button>
<button ng-click="add(2)">2</button>
<button ng-click="add(3)">3</button>
<button ng-click="add('-')">-</button><br>
<button ng-click="add(0)">0</button>
<button ng-click="add('.')">.</button>
<button ng-click="add('+')">+</button>
<button ng-click="eval()">=</button> <br>
<button ng-click="remove()">CLEAR</button>
<button ng-click="save">SAVE</button>
<button ng-click="put(formula.join(''))">PUT</button>
</div>
</body>
</html>
app = angular.module('app',['ngCookies',])
app.controller('kyk', function ($scope, $cookies) {
$scope.$cookies = $cookies;
$scope.myCookieVal = $cookies.get('cookie');
$scope.setCookie = function (val) {
$cookies.put('cookie', val);
};
});
app.controller('CalculatorController', function ($scope, $cookies) {
$scope.$cookies = $cookies;
$scope.formula = [0];
$scope.add = function (item) {
if($scope.formula == 0) $scope.formula = [item];
else $scope.formula.push(item);
};
$scope.remove = function () {
$scope.formula.pop();
if($scope.formula = ['']) $scope.formula = [0];
};
$scope.eval = function () {
var result = eval($scope.formula.join(''));
$scope.formula = [result];
$cookies.get('formul', $scope.formula.join(''));
$cookies.put('formul', )
};
$scope.save = function() {
$cookies.getObject('save');
};
$scope.put = function (value) {
$cookies.putObject('save', value);
if($scope.formula == 0) $cookies.putObject ('save', value);
else $scope.formula.push($cookies.putObject('save', value));
}
});

AngularJS trigger ng-change not working

I just want to simply trigger a change whenever I click a button. The change will just alert a text. However the trigger does not work please help.
Here is the code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="text" ng-model="first.name"> <br />
<input type="checkbox" ng-model="same" id="sames" ng-change="sameAsAbove(first, second)"> Same as above <br />
<select ng-model="change" id="changes" ng-change="changeOver()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="text" ng-model="second.name">
<input type="text" ng-model="second.school">
<span ng-click="clickMe()">Click Me!</span>
<!-- <span id="clickMe">Click Me!</span> -->
{{ same }}
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.sameAsAbove = function(primary, receiver){
receiver['name'] = primary['name'];
};
$scope.clickMe = function(){
angular.element(document.getElementById('changes')).triggerHandler('change');
// x = angular.element(document.getElementById('changes')).val();
// alert(x);
}
$scope.changeOver = function(){
alert("deam");
}
});
$("#clickMe").click(function(){
// alert("czxvzx");
// $("#same").trigger("click");
$("#changes").change();
});
</script>
</body>
</html>
Here is the link to plunker:
http://plnkr.co/edit/zErS4DaTgR79SBLbtGOy?p=preview
Try this
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$timeout){
$scope.sameAsAbove = function(primary, receiver){
receiver['name'] = primary['name'];
};
$scope.clickMe = function(){
$timeout(function() {
angular.element(document.getElementById('changes')).triggerHandler('change');
}, 100);
// x = angular.element(document.getElementById('changes')).val();
// alert(x);
}
$scope.changeOver = function(){
alert("deam");
}
});
$("#clickMe").click(function(){
// alert("czxvzx");
// $("#same").trigger("click");
$("#changes").change();
});
</script>
By adding $timeout your problem get resolved.
You can do it this way:-
$scope.clickMe = function(){
var scope = angular.element("#changes").scope();
scope.changeOver();
//angular.element(document.getElementById('changes')).triggerHandler('change');
}
Working copy here

apply ng-show and ng-hide on condition based for dynimcally created elements angular js ng-repeat

apply required filed for some filed in my form but my form is created using the custom directive, So Html is created Dynamically. I am using ng-repeat, i need to show some fields are required when user enter the submit button, but it is showing all fields is required.
<div ng-repeat="item in items">
<input type=[item.name]>
</div>
<p ng-show="ErrorMsg">Error Message </p>
when i am checking the controller logic
Controller.js
$scope.ErrorMsg = false;
if(item.value == null){
$scope.ErrorMsg = true;
}
But it is showing all fields for error msg. Please suggest me how to approach
Thanks in Advance!
I create a simple plunkr about angularjs dynamic form validation, please refer here:http://plnkr.co/edit/7OJHKsJPoHNqeeStBtnh.
// Code goes here
var myApp = angular.module('myApp',[]);
myApp.controller('DemoController', ['$scope', function($scope) {
function setTouched(form) {
angular.forEach(form, function (value, key) {
if (!/^\$/.test(key)) {
form[key].$setTouched();
}
});
}
var config = [];
for (var i = 0; i < 10; i++) {
var item = {};
item.name = 'input' + i;
item.required = (i%2 === 0) ? true : false;
config[i] = item;
}
$scope.config = config;
$scope.save = function() {
if ($scope.testForm.$invalid) {
setTouched($scope.testForm);
}
}
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs#1.3.6" data-semver="1.3.6" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
<script data-require="ng-messages#*" data-semver="1.3.16" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="DemoController">
<form name="testForm" ng-submit="save()" novalidate>
<div ng-repeat="item in config">
<input type="text" name="{{item.name}}" ng-model="item.value"
ng-required="item.required" />
<div ng-messages="testForm[item.name].$error"
ng-if="testForm[item.name].$invalid && testForm[item.name].$touched">
<div ng-message="required">this is required</div>
</div>
</div>
<button type="submit">save</button>
</form>
</body>
</html>
Hope this can help :)

Display text from textarea on submit button - Angular JS

Q] I'm basic Developer , How to display text from textarea on submit button using angular-js ?
I have current code with me :-
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = [];
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
}
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>
The above code just display's messages from textarea in an array format.
But i just want a single text message to be printed/displayed . How can that be achieved ? Thank you .
I guess you only want to display the current message which is in textarea. If so do this:
function Ctrl($scope) {
$scope.pass = [];
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
$scope.list = $scope.text;
}
};
}
You can user text as value of the textarea.
When from is submitted set the value of textarea.
I guess you want the message in textarea to show in list after form submit.
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = '';
// ^^^^^^^^^^^^^
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
$scope.list = $scope.text;
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};
}
</script>
</head>
<body>
<div>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>

Categories