how can get checked box value in angular js? - html

when checked checkbox get checkbox value in angular js how can do please help me any one, i teken code from js fiddle add css and removed boostrap.
I am trying to display checked checkbox vlaues in my project how can do.please help me any once. I tryed that code i kept in js fiddle "https://jsfiddle.net/ramesh_bogandla/22et6sao/871/" please help me any one

$("input:checkbox").click(function() {
var output = "";
$("input:checked").each(function() {
output += $(this).next('span').text() + ", ";
});
$(".textboxclass here").val(output.trim().slice(0,-1));
});
Try It Once this is an example code for idea.

Check edited fiddle, just use {{example14model}} or more detailed access to this variable in template
https://jsfiddle.net/22et6sao/872/

Related

Include one HTML file in another HTML file using client side include

I am a beginner and I have a static page where I want to include other Html files. Like the header, footer, some buttons, and a form that I am using on more than one page.
I am not allowed to use the server-side for this exercise. So I tried using jQuery but it didn't work.
But I also would like some way to include these files without making a wrapper for them. But will be happy even with the wrapper divs if you guys help me with that.
I have not used jQuery before but I feel like a have tried every way that I found. You can see all of them below.
I am using jQuery 3.5.1.min if it is of importance.
$(".header").load("_header.html")
$(function () {
$(".header").load("_header.html");
});
function unWrapPlaceholder() {
$(this).contents().unwrap();
}
$(function () {
$("#header").load("_header.html", unWrapPlaceholder);
});
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = '../views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
<div data-include="_header"></div>
I don't want to use the object tag or iframes. Are there any suggestions or corrections you can give me?
I would really appreciate the help.
The file location was the problem! In the end I used the second jQuery code.

How to add element dynamically in angularjs without using directive?

First of all, I'm new in Angularjs and not good at English.
I tried to add <li> by using directive, and below link is completed result of my first purpose.
Add element using directive
Second is passing value from Controller to directive or from directive to Controller, known as two-way binding.
But in this step, I couldn't figure out how to use #,= and '&'.
I guessed it's because of using directive in directive.
In my original code, my modal is made of directive, so button directive seems cannot get value from Controller.
I'm sorry I cannot show you my own code because I don't know how to make many directives in fiddle.
.
.
I wanna know there are any way to add element dynamically without using directive.
No matter what you suggested like link, doc, or something, it'll be great helpful to me.
Just give a little attention please. Thank you. Have a nice day!
This may helpful.
You can use javascript as follows for achieving this.
https://jsfiddle.net/u08pa50z/
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
var el = document.createElement("ul");
el.style.width="600px";
el.style.height="500px";
el.style.background="green";
var parent=document.getElementById("sib");
parent.appendChild(el);
$scope.myFunc = function() {
var ch = document.createElement("li");
el.appendChild(ch);
};
}]);
You can go with ng-include
Fetches, compiles and includes an external HTML fragment.

Button Background Image using behind code Button.Style.Add()

Quick question. I am dynamically creating some buttons and basically want to add a background image to them in the code behind. Can someone tell me how its supposed to look like? I want to use the Button.Style.Add().
I tried Button.Style.Add("background-image","url(~/Uploads/Steak.jpg)"); but it did not work.
please use following code:
Button.Style.Add("background-image","url('~/Uploads/Steak.jpg')");
Add single quotes to the url
string strimgpath = "Uploads/Steak.jpg";
String strImgLocation = "url('" + strimgpath + "')";
idimage.Style.Add("background-image", strImgLocation);

How do I create a Select option that links to another page in Rails

I have a select list with several options. I wanna choose one then it straight away direct me to a page. I don't wanna have any submit button. How do I do that in Rails?
You can achieve this with javascript. If you are using jQuery you can do something like this.
$(function(){
$("select#your_select_field_id").change(function(){
if ($(this).val() == "the desired field") {
window.location.href = "http://stackoverflow.com";
}
}
});
I didn't tested the code, it could contain syntax errors, but you can get the idea form this snippet.

Is there a way to set the CSS information for a particular instance of YUI DataTable?

The place were I wnat to use the YUI DataTable is in a wiki that allows HTML and javascript. I have created the custom table, put it in a div and gave it an ID and it works really well except that it usees the CSS from the container wiki page and visually it is not presentable. I would like to be able to set the CSS information for this particular table so that it is more readable. As you might guess I cannot modify the "head" information as the wiki only allows me to add things to the "body" of the html. I am by no means an expert in html and as such I am not sure if can specify CSS for a one table?
I was looking around in the YUI documentation to see if there was a mechansim in the YUI DataTable to set the CSS type of information but I could not really find anything. It seems like I should be able to set it in the oConfig object I pass to the table when it is created. So if someone knows of a way to do it using the YUI DataTable parameters that would be appreciated as well.
Can you run Javascript in the page? If so, then you can dynamically add a css link to the page without access to the element.
Here's how from the open source Timeline project:
// Use document for the doc param
function includeCssFile(doc, url) {
if (doc.body == null) {
try {
doc.write("<link rel='stylesheet' href='" + url + "' type='text/css'/>");
return;
} catch (e) {
// fall through
}
}
var link = doc.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
getHead(doc).appendChild(link);
};
function getHead(doc) {
return doc.getElementsByTagName("head")[0];
};
Put your datatable in a specific div with an id
Or: Via the css selector : #yourdivid .yui-dt-data