I need to clear a textbox and a select-list after a button is clicked.This is what I tried but it doesn't seems to work:
HTML:
<input type="text" ng-model="Model.CurrentDowntimeEvent.Comment" size="60" placeholder="ENTER IN ANY ADDITIONAL INFORMATION"/><br>
<select class="categories" ng-disabled="selectlistdisabled" ng-model="Model.CurrentDowntimeEvent.CategoryId" ng-options="downtimeCategory.CategoryId as downtimeCategory.CategoryName for downtimeCategory in Model.DowntimeCategories">
</select>
<button ng-click="StopCurrentDowntime()">Stop Downtime Event</button>
JS:
angular.module('myApp', [])
.controller('DowntimeController', function ($scope, $http) {
$scope.Model = new Model($http);
$scope.StopCurrentDowntime = function () {
$scope.CurrentDowntimeEvent.Comment = '';
$scope.CurrentDowntimeEvent.CategoryId = '';
}
});
Instead of using button to clear input fields you can use reset (input type="reset") inside the form
You are missing Model. in your JS
angular.module('myApp', []).controller('DowntimeController', function ($scope, $http) {
$scope.Model = new Model($http);
$scope.StopCurrentDowntime = function () {
$scope.Model.CurrentDowntimeEvent.Comment = '';
$scope.Model.CurrentDowntimeEvent.CategoryId = '';
}
});
Related
I am generating dynamic html element from angularjs controller.I have used $compile
to make ng-click work inside html element.But still it is not calling the function.
Here is my js
var accountApp = angular.module('accountApp', ['ngRoute']);
accountApp.config(['$compileProvider',function($compileProvider )
.controller('myController',function($scope,$compile)
{
var searchHTML = '<li><a href="javascript:void(0)" data-ng-
click="setMarkerToCenterA()">'+item.title+'</a></li>';
$compile(searchHTML)($scope);
$scope.setMarkerToCenterA = function() {
alert("this alert is not calling");
}
});
}]);
I have injected the dependencies also.Can anyone tell why ng-click is not calling function even though i am using $compile?
First you need an element where this li element will be located.
<div ng-controller="myController">
<ul id="list"></ul>
</div>
Then in your controller:
var element = angular.element("#list");
element.html($compile(html)($scope));
$scope.setMarkerToCenterA = function() {
alert("Here");
};
Probably you missed to parse the HTML string using angular.element(htmlString) which is then compiled.
var app = angular.module('stackoverflow', []);
app.controller('MainCtrl', function($scope, $compile, $sce) {
var searchHTML = 'hello';
var template = angular.element(searchHTML);
$compile(template)($scope);
angular.element(document.querySelector('#container')).append(template);
$scope.setMarkerToCenterA = function() {
alert("this alert is now calling");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="stackoverflow" ng-controller="MainCtrl">
<div id="container"></div>
</div>
I am opening a uibModal each time a page is opened like:
genres.js
app.controller('genresController', ['$scope', '$http', '$uibModal', 'blockUI', 'notifyService', 'lib',
function ($scope, $http, $uibModal,blockUI, notifyService, lib) {
$scope.genres = [];
var init = function () {
//Initial code
loadGenres();
};
var loadGenres = function () {
/*... some non-important codes... */
openFavoriteGenreDialog();
/*... some non-important codes... */
}, lib.handleError);
};
var openFavoriteGenreDialog = function () {
var modalInstance = $uibModal.open({
templateUrl: '/Dialog/FavoriteGenre',
controller: 'favoriteGenreDialogController'
});
modalInstance.result.then(function (msg) {
}, function (msg) {
//dismiss callback
});
};
init();
}]);
and the modal controller is in another file and the html of that modal has a cancel button.
FavoriteGenre.cshtml
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
That cancel button is beeing treated in another controller that has the function that so far looks like it
favGenrer.js
$scope.cancel = function () {
var modalInstance = $uibModal.open({
templateUrl: '/Dialog/FavoriteGenre',
controller: 'favoriteGenreDialogController'
});
modalInstance.close();
};
Because of that construction, I'm opening and closing the modal each time I press the cancel button. There is anyway so I can close the modal when I press the close button even if the cancel() funcion is in another controller that is in another file? I tried to put the cancel() function on genres.js but I wasn't able to make the html call the genresController without getting lot of erros because of the genresControllers other methods.
ANSWER
find out! the problem was that in the FavoriteGenre.cshtml I was doing
<div ng-controller="favoriteGenreDialogController" block-ui="genresContentDiv">
I just needed to let it be like:
<div block-ui="genresContentDiv">
and it worked using the
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
Try this.
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
I want to select all values from a drop down of HTML on ng-click. Here is my HTML code
<select multiple ng-model="selectedToPostalCodes"
ng-options="items.postalcode for items in toPostalCodes">
<option style="display:none;"></option>
</select>
<input type="button" value="Select All" ng-click="selectall()">
So I want the implementation of selectall() function.
Thanks
you can try this way:: Fiddle
fiddleApp.controller('Main', ['$scope', function($scope) {
$scope.toPostalCodes = [
{postalcode:1, name:"Japan"},
{postalcode:4, name:"USA"}
];
$scope.selectedToPostalCodes = [];
$scope.selectall = function(){
$scope.selectedToPostalCodes = [];
angular.forEach($scope.toPostalCodes, function(item){
$scope.selectedToPostalCodes.push( item.postalcode);
});
}
}]);
You can try like this:
$scope.selectall = function() {
var allOptions = [];
// First get all codes as list
angular.forEach($scope.toPostalCodes, function(item) {
allOptions.push(item.postalcode);
});
// And then assign the values to the scope model
$scope.selectedToPostalCodes = allOptions;
};
When I press my button, I want to print the value of my textbox in my console. But my textbox returns a undefined. It seems that all of the code are working perfect, I did it the same way as some other code I used before, but it isn't working now.
This is my html code:
<form class="form-horizontal">
<input type="text" ng-model="add" ng-model-instant><button class="btn" ng-click="order()"><i class="icon-plus"></i>Order!</button>
</form>
This is my script:
angular.module('MyApp', []).
config(function($routeProvider) {
$routeProvider.
when('/boeken', {templateUrl:'partials/boeken.html', controller:BoekenCtrl}).
when('/orders', {templateUrl:'partials/orders.html', controller:OrderCtrl}).
when('/home', {templateUrl:'partials/home.html', controller:HomeCtrl}).
otherwise({redirectTo:'/home'});
});
//BoekenCtrl
//HomeCtrl
function OrderCtrl($rootScope) {
$rootScope.order = function() { console.log($rootScope.add); $rootScope.add = ""; };
}
Why is it that my textbox is undefined?
Instead
function OrderCtrl($rootScope) {
$rootScope.order = function() { console.log($rootScope.add); $rootScope.add = ""; };
}
use:
function OrderCtrl($scope) {
$scope.order = function() {
console.log($scope.add);
$scope.add = "";
};
}
Since your form exists under OrderCtrl, you need to use $scope into OrderCtrl controller to fetch any data. But, sure, you can store it after in $rootScope
Please, see the example in Fiddle
i am trying to Refresh div using java script . setInterval() and clearInterval (), its working fine, but i want stop Refresh process for single div when i clicked stop button ..clear Interval not working herer
<script type ="text/javascript">
$(document).ready(function () {
$('.output').click(function () {
var id = $(this).closest('.g').attr('id');
Go(id);
})
$('.bt').click(function () {
var id = $(this).closest('.g').attr('id');
stop(id)
});
function Go(id) {
id = setInterval(function () {
Chat_msg('Ch04', id, u)
}, 3000);
};
function stop(id) {
clearInterval(id);
}
})
</script>
</head>
<body>
<div id="a" class='g'>
<div class="output"></div>
<input id="Button1" type="button" value="stop" class="bt" />
</div>
<div id="b">
<div class="output"></div>
<input id="Button2" type="button" value="stop" class="bt"/>
</div>
<div id="c">
<div class="output"></div>
<input id="Button3" type="button" value="stop" class="bt" />
</div>
</body>
</html>
Use a global variable for your interval.
var interv = null;
interv = setInterval(function { ... }, 5000);
$('#btn').on('click', function(){
if (interv) clearInterval(intev);
})
It's likely the reference you associated with setInterval is not within the scope of your stop-button handler.
$("#start").on("click", function(){
var interv = setInterval(function(){ /*...*/ }, 1000);
});
$("#stop").on("click", function(){
clearInterval(interv);
});
In the code above, our interv variable is not within the scope of our #stop button handler. We could change this by moving it up another level:
var interv;
$("#start").on("click", function(){
interv = setInterval(function(){ /*...*/ }, 1000);
});
$("#stop").on("click", function(){
clearInterval(interv);
});
Now both handlers have access to the interv variable.
Looks like a combination of a scoping issue, and interchangeably using id DOM attributes with setInterval response values.
<script type ="text/javascript">
$(document).ready(function () {
var timeouts = {};
$('.output').click(function () {
var id = $(this).closest('.g').attr('id');
go(id);
});
$('.bt').click(function () {
var id = $(this).closest('.g').attr('id');
stop(id);
});
function go(id) {
timeouts[id] = setInterval(function () {
Chat_msg('Ch04', id, u)
}, 3000);
}
function stop(id) {
clearInterval(timeouts[id]);
}
});
</script>
The way I have gone about this in the past is using a function that uses a set timeout to call itself.
var stop = false
function caller () {
if (stop === true){
//do something
setTimeout(caller() , 1000);
}
else{
//do something after button has been click and stop is set to true
}
}