I want to update argument of ng-click of button but not able to do it please help me... my code is
in controller
$scope.trCategoryId = 0;
and setting up this value in other function like
$scope.setClick = function (CategoryId) {
$scope.trCategoryId = CategoryId;}
in html i have define bellow
<button ng-click="ActiveTag('step1',{{trCategoryId}},0)" id="btnrename">Create</button>
it is not calling up ActiveTag function
Glad my comment worked out for you, adding it below as a solution:
Angular related attributes prefaced with ng- auto evaulate so
{{trCategoryId}} within any ng- is a no-no. It evaluates variable names against scope inside automatically, no need for the {{}}.
<button ng-click="ActiveTag('step1',trCategoryId,0)" id="btnrename">Create</button>
Related
I am using ng-include to pull in a Bootstrap button w/dropdown menu. When I write an inline ng-if, the toggle doesn't work. I understand that I need to use ng-click. My question is how to convert the inline ng-if into a function.
I've converted this:
Image preview on/off
to
<li> Image preview on/off</li>
The function I wrote is poor, and not working.
$scope.previewPanel = function() {
isPreviewPanelOpen = !isPreviewPanelOpen;
};
Here's the piece it controls (shows/hides). It works if I don't use and ng-include
<div class="leftblock" ng-class="{'col-xs-12': isPreviewPanelOpen, 'col-xs-8': !isPreviewPanelOpen}">
You need to be modifying the scope of the view (via $scope) in your function.
$scope.previewPanel = function() {
$scope.isPreviewPanelOpen = !$scope.isPreviewPanelOpen;
};
Your current function is changing the value of some random variable (likely global).
I have the following structures
<div ng-controller='ctrlA'>
<button ng-click='updateFactoryData(data)'></button>
<custom-dir>Custom directive with ctrlB</custom-dir>
<custom-dir>Custom directive with ctrlB</custom-dir>
<custom-dir>Custom directive with ctrlB</custom-dir>
...
<other-custom-dir>Custom directive with ctrlC</other-custom-dir>
<other-custom-dir>Custom directive with ctrlC</other-custom-dir>
<other-custom-dir>Custom directive with ctrlC</other-custom-dir>
...
</div>
I have a dataFactory, which when user clicks the button, the updated data will store in dataFactory, the dataFactory is injected to both ctrlB and ctrlC.
The problem is, when data is updated after clicking the button, the changes do not reflect on both custom-dir and other-custom-dir, is there any way ctrlB and ctrlC's scope value automatically reflect the changes made in scope under ctrlA?
Thanks very much for the help!
Thanks all for the kind help!! I finally figure out why the change cannot be reflected, I watch the object parameter to see if there are changes, but watch only monitor the object reference instead of the actual content, after deep watching the object parameter, I can finally get the watch work! Thanks for all the help
<custom-dir para="{data: data}"></custom-dir>
Then in directive's link function
scope.$watch('para.data', function(n,o){
alert('changed')
}, true); //>> The true is important!!
The fact that you need to share scope is a bit weird knowing that you have a parent controller that can contain your $scope item
Pass the value to attribute in the <custom-dir> and <other-custom-dir>
<custom-dir data="data"> </custom-dir>
Observe the change from the directive
attrs.$observe('data', function(value){
// call your directive controller here ...
})
The Benefit :
By passing data from attribute, the directive do not have to know about the controller/the source of the data, so, this reduce dependecy.
It's considered a best practice to use "controllerAs" and no longer use $scope.
By writing:
<div ng-controller='ctrlA as a'>
<button ng-click='a.updateFactoryData(data)'></button>
<!-- ... -->
</div>
and:
function ctrlA () {
this.data = [];
this.updateFactoryData = function (data) {
//...
}
}
You access your controller's data with a.data everywhere inside your div.
Basically what you require is here is share the factory data changes in your directives. So you can bind your desired factory data using different approaches based on your requirements(i.e. # attribute,= 2 way model, & expression bindings) in directives and than watch those variables in directives link functions (i.e. ideal place where you needs to handle those watch conditions) for changes so once anything will update on factory (through button click), it will automatically propagated in your directives. Here is the example to do different bindings.
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'#attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
};
})
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">
Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
I have made sample demo to illustrate the approach please check this.
I would like to hide a button in my form, once it's submitted and everything is working fine, I need to hide it and show something else, is there a way to do in my controller:
this.show= false;
Or do I need to add ng-show to the button and implement a variable to set to hide it?
You could use ng-class:
ng-class="{'some-class': !some.object.user, 'some-other-class': some.object.user}"
Instead of adding new variables, why not using what is already designed for that. In the angular object representing your form, there is a $submitted property.
Therefore, providing your form is named myForm, something like that should do the trick:
<button ng-if="!myForm.$submitted">Button</button>
See official guide about forms in angular
Other option would be to use ng-style to do the job:
in controller
$scope.condition = true;
$scode.activeCondition = function (con) {
$scope.condition = !con;
};
in html
<button type="button" ng-class="{'active': condition}" ng-click="activeCondition(condition)">
I'm trying to make a dynamic form with AngularJS and JavaScript. The objective is to add how many inputs the user need and transform all those inputs in AngularJS variables that print it on body. So I got that code:
$(function(){
var number = 1;
$('a.add').click(function(e){
e.preventDefault();
$('#this_div_contains_settings').append('<input type="text" name="example'+number+'" ng-model="example'+number+'" placeholder="Anything">');
number++;
});
$('#this_div_contains_settings').on('click','a.design_button', function(e){
e.preventDefault();
$(this).parent().remove();
});
});
This function add a INPUT on my DIV with the different ng-model every time it run.
The problem is, it just work's if the {{example1}} is already on my BODY, if I add it later with another function, it just doesn't work.
I'm new with AngularJS, so I didn't understand if I need to "refresh" the AngularJS everytime I add new variable or something like that.
Any help will be appreciated :)
Using jQuery is the wrong way to solve this problem. Instead, create an array inside of your controller that will hold the models for all of these inputs.
Depending on how you define/create your controllers, $scope may be replaced with this
$scope.examples = [];
Next, create a function that will add a new example to the array:
$scope.addExample = function () {
$scope.examples.push("");
}
Now, in your template, create the inputs using an ng-repeat:
<div id="this_div_contains_settings">
<input ng-repeat="example in examples" type="text" name="example" ng-model="example" placeholder="Anything">
</div>
and have your "add" button call your addExample function on click:
<a class="add" ng-click="addExample()">Add Example</a>
Finally, remove all of the code that was included in your question.
And for your .design_button that removes all the examples, that's easy too:
<a class="design_button" ng-click="examples = []">remove all examples!</a>
by that same concept, you could even remove the need for the addExample function, however i tend to keep logic in the controller (well, actually in the services, but that's another topic) anyway rather than putting it in the template.
I am using Angular framework and I need to see if the data variable is changed when I click the button.
For example
<button ng-click='change()'>{{data}}</button>
I was hoping to see if data change or console log the data variable.
Currently its not working and might have a bug.
Can I do something like following:
<button ng-click='change()'>{{data; console.log(data)}}</button>
Thanks for the help.
Edit:
<div ng-app='myApp'>
<button ng-click='change()'>{{data}}</button>
</div>
var app = angular.module('myApp', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.data='5'; //this shows correctly.
$scope.change=function(index){
$scope.data = '10'; //doesn't change after I click.
}
{{ data }} is a view binding expression. It simply prints out the value of the expression based on objects/properties in its scope.
If you want to log something on change then you can accomplish that within your change() function as defined in your controller.
The value displayed in your HTML will be the up-to-date value of data in that controller's scope.