Im trying to create a function that reads the value of an input and triggers a series of true/false, however the code below keeps returning "passStrength is not defined."
From what I can find, oninput isn't supported by Angular. How can achieve this in Angular?
Within my controller:
$scope.passStrength = function(input) {
if (input.value.toLowerCase().indexOf(/[a-z]/) > -1) {
$scope.lwrChar = true;
console.log('lower ' + $scope.lwrChar);
} else if (input.value.toUpperCase().indexOf(/[A-Z]/) > -1) {
$scope.uprChar = true;
console.log('upper ' + $scope.uprChar);
} else if (input.value.indexOf() == !isNaN(n)) {
$scope.nbrChar = true;
console.log('number ' + $scope.nbrChar);
} else if (input.value.length >= 8) {
$scope.countChar = true;
console.log('count ' + $scope.countChar);
}
};
and in my markup:
<input id="password" oninput="passStrength()" />
To fire an event when the input changes, use ng-change. Also, you must define a ng-model.
<input ng-model="password" ng-change="passStrength(password)" />
Edit:
Created a plunker demonstrating it
Related
I am trying to create clickable legends. I am using flot chart and legendFormatter to manipulate the legends. Here is my code in js file:
$scope.labelFormatter = function (label, series) {
return "<div class='col-md-12' style='font-size:12px;'><span>" + label + "</span><span ng-click=\"removeFromFunnel(" + (series.data[0][0] - 1) + ")\" class=\"criteriaClose\">✖</span></div>";
};
pageData.barChartOptions.legend = {show: true, labelFormatter: $scope.labelFormatter, noColumns: index};
$scope.removeFromFunnel = function (index) {
if (index > -1) {
pageData.funnel.splice(index, 1);
}
};
This way, the program does not seem to recognize ng-click. I also tried to use onClick but I think the function needs to be out of scope with that way.
Why is ng-click not working? What should I use instead of it?
Thanks for your help.
<div style="display:none"><input type="button" value="" id="rid" ng-click="removeFromFunnel()" /></div>
<div style="display:none"><input type="hiden" value="" id="hid"/></div>
The beloow is the js code
function remove(value)
{
document.getElementById("hid").value = value;
var btn = document.getElementById("rid");
btn.click();
}
you can collect the value in the angular function removeFromFunnel()
$scope.removeFromFunnel()
{
var value = angular.element(document.querySelector('#hid'));
//do your work with the value
}
I am trying to disable options in a ui-select using a function in the ui-disable-choice. Calling a function doesn't seem to work. Any ideas on what I am doing wrong?
UI-Select
<ui-select
id="affSel--{{seat.sli_no}}"
class="affSel"
perf-no ="{{seat.perf_no}}"
sli-no="{{seat.sli_no}}"
ng-required="true"
theme="bootstrap"
on-select="changedAffiliate(mySeat.seat.sli_no, cartPerf.perf_no, seat.sli_no,seat)">
<ui-select-match placeholder="-- Select person --">{{$select.selected.fname + ' ' + $select.selected.lname}}</ui-select-match>
<ui-select-choices repeat="affiliate in affiliates | seatAffTypeFilter:seat.seatAff"
ui-disable-choice="checkDisable(affiliate.customer_no,cartPerf.perf_no, seat.sli_no)">
<div ng-bind-html="affiliate.fname + ' ' + affiliate.lname"></div>
<small ng-show="affiliate.disabled">{{AffSelected}}</small>
<small ng-show="affiliate.validation_pass_age == 'N'">{{invalidAffLbl}}</small>
</ui-select-choices>
</ui-select>
Function
$scope.checkDisable = function (customer_no, cur_perf_no, cur_sli_no) {
$.each($scope.selectedAff, function (i) {
if (this.customer_no == customer_no && this.perfNo == cur_perf_no && this.sli_no != cur_sli_no) {
return true;
} else {
return false;
}
})
}
try
$scope.checkDisable = function (customer_no, cur_perf_no, cur_sli_no) {
return false; //true;
}
if this does not work it would mean that function types are not supported, but if it works, then you have code issue...
mostly you are not capturing result of $.each function, from the context it seems you need _.find rather than $.each
I am still a little new to Angular, and I am having trouble setting the default select option, if that option is the only one in the array. What happens specifically is that the select does default, however, the shipping cost is not being calculated. It only calculates if the user chooses it from the drop down. I think the issue may be because with the ng-change on the select element, but I am not sure.
In my HTML:
<select class="form-control" ng-change="updateShipper()" name="shipMethod"
ng-model="currentOrder.LineItems[0].ShipperName"
ng-show="user.ShipMethod.ShipperSelectionType == 'UserDropDown'"
ng-options="shipper.Name as (shipper.Name + ' ' + (shipper.ShippingRate.Price | currency | xlat)) for shipper in shippers"
ng-required="!currentOrder.IsMultipleShip() && user.ShipMethod != null" >
<option value=""></option>
In my controller:
scope.$watch('shippers', function(val) {
if(angular.isDefined(val)){
$timeout(function() {
if(val.length === 1){
scope.currentOrder.LineItems[0].ShipperName = val[0].Name;
}
}, 0);
}
});
$scope.updateShipper = function(li) {
$scope.shippingUpdatingIndicator = true;
$scope.shippingFetchIndicator = true;
if (!li) { // at the order level
angular.forEach($scope.shippers, function(s) {
if (s.Name == $scope.currentOrder.LineItems[0].ShipperName)
$scope.currentOrder.Shipper = s;
});
angular.forEach($scope.currentOrder.LineItems, function(item) {
item.ShipperName = $scope.currentOrder.Shipper ? $scope.currentOrder.Shipper.Name : null;
item.ShipperID = $scope.currentOrder.Shipper ? $scope.currentOrder.Shipper.ID : null;
});
saveChanges(function() {
$scope.shippingUpdatingIndicator = false;
$scope.shippingFetchIndicator = false;
});
}
else { // at the lineitem level for multiple shipping
angular.forEach($scope.shippers, function(s) {
if (s.Name == li.ShipperName)
li.Shipper = s;
});
li.ShipperName = li.Shipper.Name;
li.ShipperID = li.Shipper.ID;
saveChanges(function() {
$scope.shippingUpdatingIndicator = false;
$scope.shippingFetchIndicator = false;
});
}
};
Try ng-init="updateShipper()". Then set the initial value of your model in the controller like $scope.currentOrder.LineItems[0].ShipperName = 0(or whatever).
Let say I have the following codes:-
<form name="table" ng-submit="createtable()">
<input type="number" ng-model="tab.num" required></input>{{win.numR}}
<button>Save</button>
</form>
I will be adding number in this order(1,2,3,4,5,6). What I want to achieve is e.g.
I have input 1,2, and then when I input 6 it prevents me from adding the 6 because I need to add the 3, the 4 and the 5 before the 6.
thanks for the help.
Here's a full Plunkr to help you out.
http://plnkr.co/edit/1GK1JjFLoCJQd4K3l6eh?p=preview
I am using ui-validate to simplify. I suggest using this module to simplify your validation code.
var application = angular.module("validator", ["ui.validate"]);
application.controller("ValidatorExampleController", ['$scope', function($scope) {
$scope.numberStationValidationFn = function(value) {
if(angular.isUndefined(value)) {
return true;
}
for(var i = 1; i <= value.length; i++) {
if(value[i - 1] != i) {
return false;
}
}
return true;
};
}]);
Add ng-valid attribute to your input and implement a method which will set the input valid to either true or false:
<input type="number" ng-model="tab.num" ng-valid="inputIsValid(tab.num)" required>
In your controller:
$scope.inputIsValid = function(str) {
// check if str is valid and return true or false
}
I am working on quiz app. I have add the time out to every question even though user attempts the question or not.
my code in view:
<p ng-repeat="opt in question.answer">
<label ng-show="opt._correct" for="">
<input type="radio" name="questionAnswer" id="opt.id" value=""
ng-click="checkAnswer(1)" />
{{opt.__text}}
</label>
<label ng-hide="opt._correct" for="">
<input type="radio" name="questionAnswer" id="opt.id" value=""
ng-click="checkAnswer(0)" />
{{opt}}
</label>
</p>
my code in controller:
$scope.randomQuestions = function(questionslist){
$scope.randomQuestion = questionslist
[Math.floor(Math.random() * questionslist.
length)];
console.log($scope.quiz);
var item = $scope.quiz.splice($scope.randomQuestion,1)[0];
$scope.questions = new Array();
$scope.questions.push($scope.randomQuestion);
$scope.counter = $scope.counter + 1;
return $scope.questions;
}
$scope.checkAnswer = function(option){
console.log('check answer');
if(option == 1){
console.log($scope.score);
$scope.score = $scope.score + parseInt($scope.level._points_per_question);
console.log($scope.score);
} else{
}
console.log($scope.counter);
if ($scope.counter < parseInt($scope.level._total_questions + 1)){
$scope.randomQuestions($scope.quiz);
} else {
console.log('5 questions');
}
}
$scope.nextLevel = function(){
$scope.total_score = $scope.total_score + $scope.score;
$scope.score = 0;
$scope.counter = 0;
if($scope.level_count == 1){
$scope.level_count = $scope.level_count + 1;
$scope.quiz = $scope.quiz2.question;
$scope.level = $scope.quiz2;
$scope.randomQuestions($scope.quiz);
} else if($scope.level_count == 2){
$scope.quiz = $scope.quiz3.question;
$scope.level = $scope.quiz3;
$scope.randomQuestions($scope.quiz);
$scope.level_count = $scope.level_count + 1;
} else {
$scope.level_count = $scope.level_count + 1;
$scope.result_text();
}
}
$scope.result_text = function(){
$scope.result = parseInt(($scope.total_score * 100) / 400);
for(var k=0; k < $scope.score_rules.length; k++){
if($scope.result >= $scope.score_rules[k]._min_percent){
$scope.score_status = $scope.score_rules[k].__text;
console.log($scope.score_rules[k].__text);
console.log($scope.score_rules[k]);
}
}
}
Can any one suggest how to call time out from view?
Please find below the code
function controller($scope)
{
$scope.showflag = true;
setTimeout(function ()
{
$scope.$apply(function()
{
$scope.showflag = false;
});
}, 1000);
}
You could use CSS transitions or animation to do the actual transition and use ngAnimate to trigger the transitions.
There are a few examples for ngAnimate on this page.
You can try this approach:
Modify your checkAnswer() code and call another function which sets
the timeout/sleep. When the call returns from the timeout function, set a
variable (eg. isVisible) to false and use this variable in ng-show.
Something like this:
So, new ng-show would look like ng-show=" isVisible && opt._correct"