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
Related
Having this js fiddle
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = $scope.value1;
$scope.value2 = "this is it: " + $scope.value1;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1"></input></br>
<input type="text" ng-model="name" ng-change="value1"></input>
</div>
</html>
I want to introduce a value in the first input and to get it into the next one as "this is it: firstvalue".
You can achieve that easily using ng-change and using ng-model properly
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = undefined;
$scope.value2 = undefined;
$scope.onValue1Change = function(){
$scope.value2 = "this is it: " + $scope.value1;
};
}
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1" ng-change="onValue1Change()"></input></br>
<input type="text" ng-model="value2"></input>
</div>
</html>
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?
I need to pass value from page1.html to page2.html. However, nothing happens as open the page2.html as fill out the input field.
How should I do to fix it?
Page1.html
<body>
<div class="pname" data-id="barcode-number" onclick="goforward(this);">Prod</div>
<script type="text/javascript">
function goforward(d) {
var r = d.getAttribute("data-id");
var detailsWindow = window.open('page2.html');
detailsWindow.onload = function{
document.getElementById('prod0').value = p1name;
document.getElementById('prod1').value = p2name;
}
}
</script>
</body>
Page2.html
<!DOCTYPE html>
<html><head><title></title></head>
<body>
<div class="md_product">
<input id="prod0" value="Product One">
<input id="prod1" value="Product Two">
</div>
</body></html>
You can use JS localstorage to achieve your requirements.
Here is one case that can solve your problem.
Page 1:
<body>
<div class="pname" data-id="barcode-number" onclick="goforward(this);">Prod</div>
<script type="text/javascript">
function goforward(d) {
var r = d.getAttribute("data-id");
var detailsWindow = window.open('page2.html');
detailsWindow.onload = function{
let val1 = document.getElementById('prod0').value = p1name;
localStorage.setItem('prod0', 'val1');
let val2 = document.getElementById('prod1').value = p2name;
localStorage.setItem('prod1', 'val2');
}
}
</script>
</body>
Page 2:
<!DOCTYPE html>
<html><head><title></title></head>
<body>
<div class="md_product">
<input id="prod0" value="Product One">
<input id="prod1" value="Product Two">
</div>
</body>
<script type="text/javascript">
var prod0 = localStorage.getItem("prod0");
var prod1 = localStorage.getItem("prod1");
document.getElementById('prod0').value=prod0;
document.getElementById('prod1').value=prod1;
</script>
</html>
you have to pass perameters in render url like /page2?param1=textbox1value,param2=textbox2value
I'm not getting result properly using append event instead of using ng-repeat in adding each name. Can you please help me how can I change added each name from a single input field. Tell me without using ng-repeat in this because ng-repeat functionality is not working to me for my further running functionalities, you can solve this using jquery or javascript if it's possible without using ng-repeat. Thanks in advance..
Here is JSBin
var app = angular.module('myapp', ['ngSanitize']);
app.controller('AddCtrl', function ($scope, $compile) {
$scope.my = {name: 'untitled'};
$scope.add_Name = function (index) {
var namehtml = '<label ng-click="selectName($index)">{{my.name}} //click<br/></label>';
var name = $compile(namehtml)($scope);
angular.element(document.getElementById('add')).append(name);
};
$scope.selectName = function (index) {
$scope.showName = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>
<body ng-controller="AddCtrl">
<button ng-click="add_Name($index)">Add Names</button>
<div id="add"></div><br/>
<form ng-show="showName">
<label>Name Change(?)</label><br/>
<input ng-model="my.name">
</form>
</body>
</html>
If I understand what you're looking for correctly this should work.
HTML:
<body ng-controller="AddCtrl">
<button ng-click="add_Name()">Add Names</button>
<div ng-repeat="item in names">
<label ng-click="selectName($index)">{{$index}}- {{item}} //click to change<br/></label>
</div>
<form ng-show="showName">
<label>Name Change at index {{nameIndex}}</label><br/>
<input ng-model="names[nameIndex]">
</form>
</body>
JS:
$scope.names = [];
$scope.add_Name = function(index){
$scope.names.push('untitled')
}
$scope.selectName = function (index) {
$scope.nameIndex = index;
$scope.showName = true;
};
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>