ng-click doesn't pass param and trigger - javascript

http://plnkr.co/edit/mZFpdHjRVrqcWYqIZSm0?p=preview
Does anyone know why the ng-click doesn't fire?
<p ng-click="getIt({{data}})"> {{data}}</p>
$scope.getIt = function(word){
alert(word);
}
I don't see typo though..

Hi Please dont use "{{}}"
See Plunker
<li ng-repeat="data in data">
<p ng-click="getIt(data)"> {{data}}</p>
</li>
http://plnkr.co/edit/UJv48vbBKBPTm6kvGw0I?p=preview

ng-click doesn't required {{}}
Please check plunker I added.
<p ng-click="getIt(data)"> {{data}}</p>
Plunker

ng-click doesn't support interpolation ({{ }}) only valid angular expressions. Use ng-click="getIt(data)"> instead

Related

How to use the ng-repeat $index variable in an AngularJs expression?

I'm generating a lot of HTML with ng-repeat. I rely on the $index variable in order to index data in my controller.
I do alot of stuff like
ng-submit="validateExistingGuest($index)"
In this case, an undetermined number of HTML forms is generated, hence the index.
Problem is, i sometimes need to use this variable inside a different kind of expression. That would look something like that:
ng-if= "user{{$index}}.valid"
Of course, that doesn't work. I tried ways of constructing that expression, with no success.
How would one go about doing this?
You need something like
ng-if="user[$index].valid
<div ng-repeat="value in user track by $index"> ...
//now you can use the {{$index}}
<div ng-if="user[$index].valid">Show only if valid!</div>
</div>
Why don't you use the object instead the $index?, try
<div ng-repeat="car in cars" >
<p {{car}}></p>
<button ng-click="buy(car)" > buy </button>
</div>

I can't get my angular ui-router nested states to work. Code inside

I literally tried anything at this point, but I am still learning and can't get this to work.
https://plnkr.co/edit/FrNChlSwHYDbapr7gFQH?p=preview
<a class="collection-item"
ng-repeat="task in tasks"
ui-sref="todo.detail({ todoID: task.todoID })">
{{ task.text }}
</a>
What I am trying to do, is routing to /todo/1, /todo/2 and so on from the "todo"-view, but I seem to have a problem with the $stateParams.
It'd be nice if you guys could help me out and show me where my problem is :).
In addition to adding an id field to your task objects you will need to put a <section ui-view></section> in your todo.html file. This is how nested states work. You can use an href as Oliver mentioned or stick to the sref. I've forked your plunk here as an example.
Assuming each task in your array of tasks has an ID you want to then navigate to you're going to need something along the lines of:
<a class="collection-item"
ng-repeat="task in tasks"
ng-href="#todo/{{ task.todoID }}">
{{ task.text }}
</a>
You'll then need the /todo/:toDoId or something similar set up in your routes.
You have not defined todoID in your tasks items.
This works: https://plnkr.co/edit/Wk33w2eRfpz7UZNNZzFs?p=preview

How to use if construction for controller vars in angularjs

Prompt, as if working in angularjs. I try to do so:
var goods = angular.module ('goods', []);
goods.controller('Cart', function ($scope) {
$scope.goodsCount = 1,
});
In html I have tried many things:
<div ng-app="goods" ng-controller="Cart">
<span ng-if="goodsCount> 1"> 1 </span>
<div>
And it did not work
<div ng-app="goods" ng-controller="Cart">
<span> {{goodsCount > 1 ? goodsCount: 'null'}} </ span>
<div>
And it is also
So how does it work?
So there's a few issues that were corrected by other comments. Once those are actually fixed in your code it will work. Double check your working code for typos as well. Here is an example of this working with your code that you have supplied without typos.
plunker
http://plnkr.co/edit/t4yAKgTdYzt18YUZmX5M?p=preview
In the script file you can change the value to see the different things appear or change.
Oh and yes forgot to mention, the comma after your $scope.goodsCount was breaking it. That is also fixed in the plunker
Your controller is called Cart and you're putting ng-controller="Basket" on the scope. Also, you are probably wanting to use ng-show.
Try:
<div ng-app="goods" ng-controller="Cart">
<span ng-show="goodsCount > 1"> {{ goodsCount }} </ span>
<div>

scope issue caused ng-click don't trigger

I uses angular ui tab (http://angular-ui.github.io/bootstrap/) and I added a delete btn inside the the js file. I can't do it with my markup because the js generate the template on the js side.
my ng-click doesn't work when I put this
<span ng-click="deleteTab()" >dlt</span>
js
$scope.deleteTab = function(){
//$scope.tabs.splice(this, 1);
alert('d');
}
within my controller. I tried to include the js on the topest and before the , nothing work. Until I try onClick. I wonder why I can't use ng-click in my situation?
If you add new HTML to the DOM without using angular, you need to $compile the HTML to let angular to bind the content and $watch changes. See the docs
$compile(element.contents())(scope);
Edit:-
Ah you can give the title as a HTML template as well,see the tabs definition
<tab ng-repeat="workspace in workspaces"
active=workspace.active>
<tab-heading>{{workspace.name}}<span ng-click="deleteTab()" >dlt</span></tab-heading>
<div ng-controller="TabsChildController" >
<div>
{{workspace.id}} : {{ workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
</div>
</tab>
and here is the solution
that's a plunker that could solve your problem.plunker the only doubt is what workspace would you want to close, i imagine it is the last, otherwise you only need to modify the delete method.
EDIT
in this version you can delete the selected workspace, you have to controll the css, but i thin it could be a good solution
new plunker

Bind ng-models in input type checkbox

I have a problem when binding ng-models with ng-repeat in a input tag type checkbox.
I will first attach my code and then explain more in detail.
app/main.html:
<div ng-repeat="feature in features">
<input type="checkbox" ng-model="features[$index].name">{{features[$index].name}}
</div>
<br></br>
<div class="highlighter">
<span ng-class="{emo:Emotions}">Manually</span> <span ng-class="{feel:Feelings}">create</span> the <span ng-class="{emo:Emotions}">entire</span>
</div>
main.js
angular.module('webClientApp')
.controller('MainCtrl', function ($scope,$http) {
[...other variables...]
$scope.features = [{'name':'Emotions'},{'name':'Feelings'}];
[...other parts of code]
});
Let's also assume that in the main.css file there are references to the classes .emo' and.feel' respectively to highlight the target word when the user ticks the box relative to the feature.
Now, the application works correctly when I listed all the inputs one by one like the following:
<input type="checkbox" ng-model="Emotions">Emotions
<input type="checkbox" ng-model="Feelings">Feelings
but I wanted to wrap it into an ng-repeat and list the features in the controller scope, since the features I will considered will be more. When I try the code above when I tick on the box the name changes to `true'.
I have read a lot about how to bind models to an ng-repeat inside a input tag but none of the solutions apply to my case.
Can someone please help me?
I changed thigs up quite a bit from your original model but... I did get something to behave similar to what you are looking for.
HTML
<div ng-app="webClientApp">
<div ng-controller="MainCtrl">
<div ng-repeat="(feature,enabled) in features">
<input type="checkbox" ng-model="features[feature]">{{feature}}</input>
</div>
<div class="highlighter">
<span ng-class="{emo:features.Emotions}">Manually</span> <span ng-class="{feel:features.Feelings}">create</span> the <span ng-class="{emo:features.Emotions}">entire</span>
</div>
{{features}}<br>
{{features.Emotions}}<br>
{{features.Feelings}}
</div>
JS
var app = angular.module('webClientApp', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.features = {Emotions: true, Feelings: true};
});
Here's the fiddle: http://jsfiddle.net/rodhartzell/8YrxQ/
Hope this helps.
(i should add this as a comment, but I don't have enough rep. yet)
There is an issue on github which concerns your issue: https://github.com/angular/angular.js/issues/1404 and the comment of caitp shows some workarounds: https://github.com/angular/angular.js/issues/1404#issuecomment-30859987
You could (also) define a new javascript object in your controller and map the elements to that.
In controller: $scope.awnsers = {};
In template: ng-model="awnsers[feature.name]"
I hope this helps
You must use ng-checked instead of ng-model.
Check out this jsfiddle
http://jsfiddle.net/fizerkhan/z5z9s/24/
ngModel and ngChecked are not meant to be used together.
ngChecked is expecting an expression, so by saying ng-checked="master". If the expression is truthy, then special attribute "checked" will be set on the element
You should be able to just use ngModel, tied to a boolean property on your model. If you want something else, then you either need to use ngTrueValue and ngFalseValue (which only support strings right now), or write your own directive.

Categories