I wanted to write a generic method to set different models passed as a variable to the function on ng-click, googled a lot but found nothing which is useful, here is my code
<span class="fa fa-star " ng-click="setClassJsn(1, 'present')" id='present'></span>
<span class="fa fa-star " ng-click="setClassJsn(1, 'clarity')" id='present'></span>
<input type="text" ng-model="present" />
<input type="text" ng-model="clarity" />
I wanted to translate the "e" to the model name and set it accordingly.
$scope.setClassJsn = function(value, e) {
alert("hai this is setting class");
console.log(e);
$scope."e" = value;
};
Please note that i know $scope."e" = value; this statement is wrong just to understand i have given the quotes.
You can try $scope[e] = value.
angular.module("app", []).controller("ctrl", function($scope) {
$scope.setClassJsn = function(value, e) {
console.log(e);
$scope[e] = value;
}
$scope.displayClassJsn = function(e) {
console.log($scope[e]);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span class="fa fa-star " ng-click="setClassJsn(1,'present')" id='present'>Span 1</span>
<span class="fa fa-star " ng-click="setClassJsn(1,'clarity')" id='present'>Span 2</span>
<input type="text" ng-model="present" />
<input type="text" ng-model="clarity" />
<br/>
<button ng-click="displayClassJsn('present')">Show 'present'</button>
<button ng-click="displayClassJsn('clarity')">Show 'clarity'</button>
</div>
Related
I am working on trying to create a dynamic password reset page where the red X favicons will turn to green check marks when proper conditions are met. Right now the red X stays even when conditions are met. How can I get this to work properly? I have the script in the body section right now. The password fields being validated are passR1 and passR2
protected void Page_Load(object sender, EventArgs e)
{
passR1.Attributes.Add("onKeyUp", "CallScript(checkPassword())");
}
<script>
function checkPassword()
{
var ucase = new RegExp("[A-Z]+");
var lcase = new RegExp("[a-z]+");
var num = new RegExp("[0-9]+");
var password1 = document.getElementById("passR1");
var password2 = document.getElementById("passR2");
if (password1.val().length >= 8) {
$("#8char").removeClass("fa-times");
$("#8char").addClass("fa-check");
$("#8char").css("color", "#00A41E");
} else {
$("#8char").removeClass("fa-check");
$("#8char").addClass("fa fa-times");
$("#8char").css("color", "#FF0004");
}
if (ucase.test(password1.val())) {
$("#ucase").removeClass("fa-times");
$("#ucase").addClass("fa fa-check");
$("#ucase").css("color", "#00A41E");
} else {
$("#ucase").removeClass("fa-check");
$("#ucase").addClass("fa fa-times");
$("#ucase").css("color", "#FF0004");
}
if (lcase.test(password1.val())) {
$("#lcase").removeClass("fa-times");
$("#lcase").addClass("fa-check");
$("#lcase").css("color", "#00A41E");
} else {
$("#lcase").removeClass("fa-check");
$("#lcase").addClass("fa-times");
$("#lcase").css("color", "#FF0004");
}
if (num.test(password1.val())) {
$("#num").removeClass("fa-times");
$("#num").addClass("fa fa-check");
$("#num").css("color", "#00A41E");
} else {
$("#num").removeClass("fa-check");
$("#num").addClass("fa-times");
$("#num").css("color", "#FF0004");
}
if (password1.val() == password2.val()) {
$("#pwmatch").removeClass("fa-times");
$("#pwmatch").addClass("fa-check");
$("#pwmatch").css("color", "#00A41E");
} else {
$("#pwmatch").removeClass("fa-check");
$("#pwmatch").addClass("fa-times");
$("#pwmatch").css("color", "#FF0004");
}
}
</script>
<asp:TextBox ID="passR1" runat="server" type="password" onKeyUp="checkPassword()" ClientMode="Static" placeholder="New Password" CssClass="form-control" ></asp:TextBox>
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-key"></i></span>
</div>
<asp:TextBox ID="PassR2" runat="server" type="password" placeholder="Confirm Password" CssClass="form-control" ></asp:TextBox>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<span id="8char" class="fa fa-times" style="color:#FF0004;"></span> 8 Characters Long<br/>
<span id="ucase" class="fa fa-times" style="color:#FF0004;"></span> One Uppercase Letter<br />
<span id="SpecChar" class="fa fa-times" style="color:#FF0004;"></span> One Special Character
</div>
<div class="col-sm-6">
<span id="lcase" class="fa fa-times" style="color:#FF0004;"></span> One Lowercase Letter<br/>
<span id="num" class="fa fa-times" style="color:#FF0004;"></span> One Number<br />
<span id="pwmatch" class="fa fa-times" style="color:#FF0004;"></span> Passwords Match
</div>
</div>
Sorry for being a bit newbie at Vue. I'm trying to find out why one of my click functions is not triggering for multiple elements.
The click IS WORKING on the #app-icon. However, the function is not triggering (or even adding an event listener) for either of the labels.
I have a based HTML structure:
<header id="topbar">
<div id="app-menu">
<i id="app-icon" #click="clickEffect($event)" class="fa fa-bars"></i>
<form id="searchVideos" action="#" method="POST">
<label>
<i class="fa fa-search"></i>
<input v-on:keyup="ChangeVideos" type="text" class="search" placeholder="Search anything">
</label>
<label class="label-videos" #click="clickEffect($event)" id="videos-mine">
<input type="radio" checked name="search-val">
<i class="fa fa-user"></i>
</label>
<label class="label-videos" v-on:click="clickEffect($event)" id="videos-all">
<input type="radio" name="search-val">
<i class="fa fa-users"></i>
</label>
</form>
<div class="login">
Login
</div>
</div>
</header>
and my VueJS script:
var buttonClick = new Vue({
el: '#topbar',
data: {
clicked: false,
},
methods: {
clickEffect: (event) => {
console.log(1);
let el = event.target;
el.classList.add("clicked");
setTimeout(function() {
el.classList.remove("clicked");
}, 500);
}
}
});
It seems your codes should work for clicked effect.
But you should fix the Arrow function (lambda) usage for Vue methods, it will cause the context of that method is not Vue instance if using Arrow function (lambda).
Look into below snippet (check the console output for clickEffect/clickEffect1 when click 'Test'):
var buttonClick = new Vue({
el: '#topbar',
data: {
clicked: false,
},
methods: {
clickEffect: function(event) {
console.log('function', this.$data)
let el = event.target;
el.classList.add("clicked");
setTimeout(function() {
el.classList.remove("clicked");
}, 1500);
},
clickEffect1: (event) => {
console.log('lambda', this.$data)
},
ChangeVideos: function () {
}
}
});
.clicked {
background-color:red
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<header id="topbar">
<div id="app-menu">
<i id="app-icon" #click="clickEffect($event);clickEffect1()" class="fa fa-bars">Test</i>
<form id="searchVideos" action="#" method="POST">
<label>
<i class="fa fa-search"></i>
<input v-on:keyup="ChangeVideos" type="text" class="search" placeholder="Search anything">
</label>
<label class="label-videos" #click="clickEffect($event)" id="videos-mine">
<input type="radio" checked name="search-val">
<i class="fa fa-user"></i>
</label>
<label class="label-videos" v-on:click="clickEffect($event)" id="videos-all">
<input type="radio" name="search-val">
<i class="fa fa-users"></i>
</label>
</form>
<div class="login">
Login
</div>
</div>
</header>
I am using jQuery Spinner and dont know how to get value from spinner to use in javascript code.
JS - in separate library i need to call value
function calculate (){
var result = 15 * HERE I NEED VALUE! ;
}
<div class="input-group spinner" data-trigger="spinner">
<input type="text" class="form-control text-center" value="0" data-rule="quantity">
<div class="input-group-addon">
<i class="fa fa-caret-up"></i>
<i class="fa fa-caret-down"></i>
</div>
</div>
Something like this
$("#spinner")
.spinner('delay', 200) //delay in ms
.spinner('changed', function(e, newVal, oldVal) {
// trigger lazed, depend on delay option.
})
.spinner('changing', function(e, newVal, oldVal) {
// trigger immediately
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vsn4ik/jquery.spinner/master/dist/js/jquery.spinner.min.js"></script>
<div data-trigger="spinner" id="spinner">
-
<input type="text" value="1" data-rule="quantity">
+
</div>
I am trying to post a form data but the content are not updated on the UI.
The following code is working it does post the data but the tags are not updated in the {{tag.Title}}.
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(data){
var new1 = data;
$scope.consultantCv.TagsbyTypes[0].Tags.push(newtag);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag); //this code is not updating the binding in the UI
};
<div class="row" data-ng-repeat="tagsByType in consultantCv.TagsbyTypes" ng-init="init('tag',2000)">
<div class="col-md-12">
<hr />
<h2>
<i class="icons8-{{tagsByType.CssClass}}" aria-hidden="true"></i>{{tagsByType.Title}}
</h2>
<div class="tags">
<div class="input-group" ng-controller="consultantController">
<div ng-repeat="tag in tagsByType.Tags" class="tag label label-success">
{{tag.Title}}
<a class="close" href ng-click="removeTag(tag)">×</a>
</div>
<form ng-submit="saveTag(Title,tagsByType.Id)" role="form">
<input type="text" ng-model="Title" class="form-control" placeholder="add a tag..." ng-options="suggestion.Title for suggestion in suggestion" uib-typeahead="suggestion.Title for suggestion in loadTags($viewValue,tagsByType.Id)" typeahead-loading="loadingTags" typeahead-no-results="noResults">
<span class="input-group-btn"><input type="submit" class="btn btn-default" value="Add"></span>
</form>
</div>
</div>
</div>
</div>
Push your data as object with same property name.
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(data){
var newData = {
Title : data,
}
$scope.consultantCv.TagsbyTypes[0].Tags.push(newData);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag); //this code is not updating the binding in the UI
};
Found the issue was that tagsType was not passed to the controller.
Fixed it by the following code
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(result){
TagTypeId.Tags.push(result);
$scope.consultantCv.TagsbyTypes.Tags.push(newData);
//$scope.consultantCv.TagsbyTypes[0].Tags.push(new1);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag);
};
<form ng-submit="saveTag(tag.Title,tagsByType)" role="form">
<input type="text" ng-model="tag.Title" class="form-control" placeholder="add a tag..." ng-options="suggestion.Title for suggestion in suggestion" uib-typeahead="suggestion.Title for suggestion in loadTags($viewValue,tagsByType.Id)" typeahead-loading="loadingTags" typeahead-no-results="noResults">
<span class="input-group-btn"><input type="submit" class="btn btn-default" value="Add"></span>
</form>
I have put up a snippet of my MVC4 code here. I would like the "minus" button to remove the row it belongs to, then goes through the array and adjust the input names to be sequential. I think I will need it to be sequential to work with MVC4 model binding.
My problem is, how do I identify which button has just been clicked, and which object in the array it belongs to? Any ideas please? I'm completely new to knockout so I'm not even sure if this is the best way to do it.
This is my viewmodel:
function ViewModel() {
this.breeders = ko.observableArray([{
keyName: ko.observable("Breeders[0].Key"),
valueName: ko.observable("Breeders[0].Value"),
canAdd: ko.observable(true),
canRemove: ko.observable(true)
}]);
this.addRow = function () {
var next = this.breeders().length;
this.breeders.push({
keyName: ko.observable("Breeders[" + next.toString() + "].Key"),
valueName: ko.observable("Breeders[" + next.toString() + "].Value"),
canAdd: ko.observable(true),
canRemove: ko.observable(true)
});
};
this.removeRow = function () {
};
}
And this is my markup:
<div class="form-group">
<div id="breedersFormsContainer" data-bind="template: {name: 'breederForm', foreach: breeders}"></div>
</div>
<script type="text/html" id="breederForm">
<div class="col-lg-offset-3">
<span class="col-lg-1 control-label">Reg: </span><span class="col-lg-2"><input data-bind="attr: {name: keyName}" type="text" class="form-control" /></span>
<span class="col-lg-1 control-label">Name: </span><span class="col-lg-6"><input data-bind="attr: {name: valueName}" type="text" class="form-control" /></span>
<button type="button" class="btn btn-default" data-bind="enable: canRemove"><span class="glyphicon glyphicon-minus">-</span></button>
<button type="button" class="btn btn-default" data-bind="enable: canAdd, click: $parent.addRow.bind($parent)"><span class="glyphicon glyphicon-plus">+</span></button>
</div>
</script>
If you have bound the click handler to the button, you can do the following
this.removeRow = function (data) {
yourObservableArray.remove(data);
};
data will be a reference to the object bound to the current row