Is it possible to pass angular js data available on a cshtml page to a button click event?
the angular js object is referenced as item.property. {{item.property}} works well between the html tags.
The function is:
function ShowFileDialog(ProjectID)
{
alert(ProjectID);
}
The cshtml that I would like to do is something like this, but clearly is very wrong.
<button id="button-view" onclick="ShowFileDialog({{item.projectId}})"></button>
I already have a work around - so others are not needed.
In your controller,
$scope.project= {"Id": 1, "name":"project1"};
$scope.ShowFileDialog = function(ProjectID)
{
alert(ProjectID);
}
then in your html,
<button id="button-view" ng-click="ShowFileDialog(project.Id)">show dialog</button>
If you have a list of projects as such,
$scope.projects= [{"Id": 1, "name":"project1"},{"Id": 2, "name":"project2"}];
then in your html use ng-repeat as,
<ul>
<li ng-repeat="proj in projects>
{{proj.name}} <button ng-click="ShowFileDialog(proj.Id)">show dialog</button>
</li>
</ul>
see more here
From my POV these type of mixes shouldn't be done. The closest correct approach should be:
Setting your view with a value in the way angular was meant to be used:
<input type="text" ng-model="myVariable" id="myVar" />
and if you want to you get or use this value get it from the view like:
<script type="text/javascript">
var param1 = document.getElementById("myVal").value;
samplefunction( param1 );
</script>
Online Demo
Note:
In this example I used an input but you could use a data-myVar attribute and get the value from there as well.
Related
I have in my code, some html elements that are added later on the page. but when you add it later, the directive ng-click does not work.
Another solution I've tried was to call a node method on this later added element using onclick attribute, but it means call a angularJs method outsite the controller and it's not possible (if so, could be a nice solution for many type of problems)
here's the jsfiddle example:
http://jsfiddle.net/hugoofab/wktqrhv3/1/
here's the markup:
<div ng-app="myApp" ng-controller="MyController" >
<button type="button" ng-click="testFunction('this will work')">STEP 1. this will work</button>
<button type="button" ng-click="addElement()" >STEP 2. add button</button>
<div id="foodiv"></div>
<button type="button" onclick="anotherWay()" >STEP 4. another way</button>
Here's the javascript:
var myApp = angular.module('myApp', []);
function anotherWay ( ) {
alert("another way would be call node method outside, but how to do it?")
// ohhh man.. what I'll code here?
//myApp.controller.scope()..... I really don't know
}
myApp.controller('MyController', function($scope) {
$scope.testFunction = function ( a ) {
alert(a)
}
$scope.addElement = function ( ) {
document.getElementById('foodiv').innerHTML = '<button type="button" ng-click="testFunction(\'this will not work\')">STEP 3. this will not work</button>' ;
}
});
Thank's!
It seems you're doing things in a "non-angular" way...
First of all, this happens to you because you add these elements after angular has $compiled the view.
One way of doing this the "angular way", is using an ng-show/ng-hide directive with your buttons, and showing/hiding them using the controller.
Another way is having something like this:
$scope.buttons = [{ }, { }];
And adding buttons to this array using the controller. Then render this array in your view using ng-repeat.
I have two textarea which starts on empty value.
Then when I fill the first textarea with id "postcrudo" I want that the next textarea (with id "posthecho") getthe same value as the first, and also show the same. Like a two way binding, like AngularJS, but only with JavaScript and jQuery.
This is the JS:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$("#postcrudo").val(function(){
algo = this;
});
postHecho = postCrudo;
console.log("OK!");
});
});
</script>
and this the HTML:
<body>
<div style="width:700px;float:left;">
<p>Post crudo:</p>
<p><textarea cols="100" maxlength="99999" name="postCrudo" id="postcrudo" rows="60"></textarea></p>
</div>
<div style="width:700px;float:left;">
<p>Post pasado:</p>
<p><textarea cols="100" maxlength="99999" name="postHecho" id="posthecho" rows="60"></textarea></p>
</div>
<div style="clear:both;"></div>
<p><input type="submit" value="submit" id="submit" /></p>
</body>
The error in Chrome console is:
Uncaught ReferenceError: postCrudo is not defined
Is this what you want?
https://jsfiddle.net/a4nmto6t/1/
Just get the value of the first textarea and change the value of the second to that:
$(document).ready(function(){
$("#submit").click(function(){
var postCrudoVal = $("#postcrudo").val();
$("#posthecho").val(postCrudoVal);
console.log("OK!");
});
});
Neither postHecho nor postCrudo are declared (by you**), and even if they were, assigning one of them to the other does not do what you want. You have to assign the value of the first textarea to the value of the second textarea using (in this case) jQuery selectors, because they ARE the ones referencing the DOM elements (the textareas).
** Elements that have an id are set as global 'variables' by default, but you shouldn't use them; it is instead suggested that you either use the DOM API to find elements or use jQuery (which uses the DOM API behind the scenes).
There is no declaration of postCrudo so it is undefined. Also why would you want to try and do this yourself instead using something like AngularJS to handle data bindings. You are essentially doing more work for no reason. Plus you have to handle all aspects of 2 way data binding manually. To me there is smarter ways to do this.
Your element id postcrudo is all lowercase. postCrudo is indeed not defined
This linepostHecho = postCrudo; makes no sense, I think you're trying to do this:
$('#posthecho').val($('#postcrudo').val())
JavaScript syntax is case sensitive.
`postHecho = postCrudo;`
Should be:
`postHecho = postcrudo;`
I am confused as to why this code doesn't work. I have a controller I am called sidebar and this works:
<a href="{{sidebar.id}}" >
and now my backend programmer wants me to include the id in the url that I send info to and yet this will not work, how do I get the id number inside the url?
<input id="fileupload" type="file" name="files[]" multiple data-url="https://domain.com:9999/{{sidebar.id}}">
I am confused why one works not the other.
Well in the first case you should always use ng-href instead of href. In the second case it looks like you are programmatically submitting your form. Where is the data-url attribute used? The id should be appended to the url in the controller function that handles the form submission.
Strangely enough this works for me: Plunker
In HTML:
<input type="file" data-url="https://domain.com:9999/{{sidebar.id}}"/>
Controller:
$scope.sidebar = {
id : 'a'
};
Are you sure this is available on scope?
I am trying to pass one parameter to a function by knockout click binding. If i try sending it without binding, it works.
Here is the fiddle of the working code without binding:
https://jsfiddle.net/Obviously/ev0Lcx7q/4/
But if I try binding like this, it does not works:
<input class="sometextbox">
<button type="button" data-bind="click: $root.someFunction.bind($root,$(this).siblings('input').val())"> Search!
</button>
I get the error at $(this), JavaScript runtime error: Object doesn't support property or method 'siblings'
$element gives you access to the current element in a Knockout binding.
<input class="sometextbox">
<button type="button" data-bind="click: $root.someFunction.bind($root, $($element).siblings('input').val())"> Search! </button>
Note that using jquery in a Knockout binding is not a common approach.
Your code isn't really making correct use of knockout. Using it to add click events when (as your fiddle example shows) a regular in-line event definition works fine, but ignoring the ability of knockout to bind that textbox to some variable in your program seems like you're getting things backwards.
Something more like this is how I think knockout was intended to be use:
<script>
ko.applyBindings(model);
function myModel(){
this.myInput = ko.observable('some default value');
}
function myClick(){
alert(model.myInput());
}
</script>
<input class="textbox" data-bind="value: myTextArea">
<button data-bind="click: myClick">Go</button>
I have the following code:
<input id="id">
<button data-action="bea" ng-click="Create($('#id1')[0].value);" class="btn">Insert ID</button>
<button data-action="bea" ng-click="Create($('#id2')[0].value);" class="btn">Insert ID</button>
In the JS I have:
$scope.Create = function (id){
if (id === undefined) {
$scope.data = "You must specify an id";
} else {
$scope.data = data;
console.log(data);
});
}
};
When the call gets into the Create function the value of the id is undefined.
If I add the following line at the beginging of the Create function everything works ok:
id = $('#id')[0].value;
If I send a constant value it works:
<button data-action="bea" ng-click="Create('SomeID');" class="btn">Insert ID</button>
Why is this happening and how can I do that without putting the line of value into the method?
Thanks
This is just an extension of comments and other answers, You could achieve this in many ways using angular, one simple example could be:-
<!-- Add a controller -->
<div ng-controller="MainCtrl">
<!-- Give a model binding to your text input -->
<input ng-model="userEntry" type="text"/>
<!-- ng-click pass which ever argument you need to pass, provided it is an expression that can be evaluated against the scope or any constants -->
<button data-action="bea" ng-click="Create(userEntry);" class="btn">Insert ID</button>
<!-- Some simple data binding using interpolation -->
{{data}}
<!-- Just for demo on repeater on a list of items on the scope -->
<div ng-repeat="item in items track by $index">{{item}}</div>
</div>
Example Demo
My 2 cents on the lines of what were originally trying to do:-
Use angular bindings instead of accessing DOM directly for getting the data, it really helps you deal with just the data without worrying about how to access or render it in DOM. If you think you need to access DOM for implementing business logic re-think on the design, if you really need to do it, do it in a directive. Angular is very opinionated on the design and when where you do DOM access.
ng-model
ng-binding
controller
all about ngmodel controller
This is not the way you should do in AngularJS. You should really think in Angular if you want to use AngularJS. Refer this post ("Thinking in AngularJS" if I have a jQuery background?)
All DOM manipulation should be done in Directive. Refer this page that I found really clear.
(http://ng-learn.org/2014/01/Dom-Manipulations/)
My guess is that $ is not bound to the jQuery function when the ng-click value is evaluated, because it is not exposed in the Angular scope.
Solutions to adress this:
expose the jQuery function in scope somewhere, e.g $scope.$ = $; in a controller.
make the Create function parameterless as you suggested, with a var id = $('#id')[0].value; at the beginning
my favorite : avoid using jQuery. If you put some data in the #id element, there's probably a more natural and AngularJS-idiomatic way of retrieving it than querying the DOM (e.g an Angular service).
In particular, if the element you're targeting is an <input> element, then use the ngModel directive to link the value to a $scopeproperty that will be accessible in the controller :
<input ng-model="inputData"/>
The JavaScript you are trying to pass as a parameter of the create function is not available in the scope of the Create function.
Try to target the element a different way.
Does that help?