I have ng-repeat in first line of code , in the next line I need to create a dynamic variable based on what I get in ng-repeat.
code would look something like this:
<div ng-repeat="head in arrayofhead">
<span ng-if="canIbecreated_{{head}}">I am created!!</span>
</div>
where
arrayofhead = ["1","2","3"];
but this produces an error while similarly I can pass {{$index}} in this easily.
Why this ditching is present in Angularjs?
on Controller I would do
var canIbecreated_1="false";
var canIbecreated_2="true";
var canIbecreated_3="false";
To crate and not to create the span.
... ng-if="someFunc(head)" ...
Inside the ng-repeat block. That should do the trick.
Related
How to access variable from controller to javascript?
Controller:
$scope.coveragedetailjson = $rootScope.getEligibilityData;
In this variable I get the JSON data. And I want to access the value in JavaScript and assign that value to the div.
Html:
<script>
var detail = $('[ng-controller="getcoveragedetailController"]').scope().coveragedetailjson;
alert(detail);
<script>
Then I want to assign this detail value to div. How can I do that?
You can attach your controller to the view with the ng-controller directive.
For example:
<div ng-controller="Ctrl">
{{ coveragedetailjson }}
</div>
this code bind the $scope.coveragedetailjson inside the div.
What do you mean by 'assign this detail value to div'?
This should insert detail to div -
DivElement.innerHtml = DivElement.innerHtml + JSON.stringify(detail);
But what you are doing is very bad design. Consider using data binding {{detail}} and if you need to pass it from one directive to another to it width Service
In this you can directly access json data by key value and store it to div element For ex.
<script>
var detail = $('[ng-controller="getcoveragedetailController"]')
.scope().coveragedetailjson;
$(divelement).html(JSON.stringify(detail));
</script>
Or You can do this by this way
<div ng-controller="Ctrl">
<div ng-repeat="x in coveragedetailjson">
{{ x.keyname }}
</div>
</div>
You can use second way for print item in div element
onclick="triggersTracking($(this).attr('a'),$(this).attr('b'),$(this).attr('c'),Enum.BtnSellerView)"
I have this line at various HTML tags/buttons. I want to move this code to one place for better maintainability. The problem is with third/last attribute i am passing since its Enum, it has different values being passed from different tag elements.
How can i move it to one common place where it would get invoke. For example I could have made a class if i have had just these (this).attr since its common for every tag.
You can do like
Give all the elements a common class name
Then add a data attribute, "data-enum" to each tag with corresponding value.
Then you can write the code like this,
$(".className").click(function () {
var a = $(this).attr('a');
var b = $(this).attr('b');
var c = $(this).attr('c');
var enum = $(this).data('enum');
});
You can use jquery to get this:
$("body").on("click", "someClass", function() {
//code here
});
you don't need to write $(this).attr('a'),$(this).attr('b'),$(this).attr('c')
again and agin on every onclick just paas this object and get them all in function like :
onclick="triggersTracking(this,Enum.BtnSellerView)"
function triggersTracking(obj,enumVal){
// get these values here by obj (no repetitive code needed in every onclick )
$(obj).attr('a')
$(obj).attr('c')
$(obj).attr('b')
}
Do some thing like this
.click()
.on()
.data()
if you use attributes like data-enum , data-e....
so use $(this).data() it will return all attributes in JSON which is starting
from data-
$('.click').click(function(e) {
console.log($(this).data())
$('body').append($(this).attr('a'))
})
// if you have dynamic html tag then go for .on
$('body').on('click','.click',function(){
//callback
console.log($(this).data())
$('body').append($(this).attr('a'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="click" a="i am a attr of p" b="i am b" data-a="i am data a">i am p</p>
<h2 class="click" a="i am a attr of h2">i am h2</h2>
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 init a repeater colorSetOne in the HTML, and then, I want to replace with another repeater colorSetTwo, how to do this (it can be trigger by an event)? and here is jsfiddle : http://jsfiddle.net/8xWRm/
HTML:
<ul ng-app ng-controller="cubeCtrl">
<li ng-repeat="color in colorSetOne">{{color}}</li>
Javascipt:
function cubeCtrl($scope){
$scope.colorSetOne = ["red","blue","green","oringe"]
$scope.colorSetTwo = ["blue","red","black","white"]
}
You just need to reassign colorSetOne
$scope.colorSetOne = $scope.colorSetTwo;
If you want to keep colorSetOne then you should put your repeater on another variable like colorSet and just assign the appropriate color set as needed.
I have the html Structure that I need to update from the json data. My Json data is in a Controller. I need to write an expression for ng-click event that will read the json data and put the in the corresponding div in html. but I am not sure how to acheive this.
Below is what I have so far.
<body data-ng-app>
<div class="container" data-ng-controller="UpdateDataCtrl">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
UPdate Controllers
</body>
function UpdateDataCtrl($scope) {
$scope.data = [
{
"USA":"Eglish",
"Pop":"232423432432"
},
{
"France":"French",
"Pop":"1212323432"
},
{
"Spain":"Spainish",
"Pop":"3432432"
}
]
}
On each click the 2 Div should get updated from the json. First div should have USA---English Pop---2342234232 and then on next click the div should have data from France and so on.
http://jsfiddle.net/MBFpD/1/
Thanks
It appears that you are unclear on the concept of AngularjS. You don't want to update the DIVs. You want to reference your model and then change the data in your model.
For example you can write the div like this:
<div class="inner1">Population: {{data[dataindex].Pop}}</div>
Then in the Controller you initialize the dataindex to 0, so that this will output the population from the first entry in the array:
$scope.dataindex = 0;
The click function (you must have the link with the ng:click inside the block governed by the Controller!) could then just increase the dataindex by one and by using modulo restart at 0 again when the end of the array was reached.
$scope.click = function() {
$scope.dataindex = ($scope.dataindex+1) % $scope.data.length;
Here is an updated and modified jsfiddle of your example which will show everything in action: http://jsfiddle.net/MBFpD/2/
Bind your data to your scope when you click on the link:
$scope.update = function() {
$scope.data = data; //your array defined locally to the scope
};
ng-repeat your data bound to the scope; display the container if the size of the array is > 0.
Use {{index}} to get the iteration variable inside the loop.
Above all, move your ng-controller declarative at the top to enclose both your ng-repeat and your ng-click; otherwise, AngularJS cannot guess what you want to achieve.
http://jsfiddle.net/MBFpD/5/