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.
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
Context: I am building a helper with dynamically editable help sections (each one with its title and content). I have an "Add" button at the bottom of the last help existing section to add more help sections to this helper.
I am binding a variable $scope.helpVisible to set the visibility of the section to ReadOnly or Editable with ng-show and ng-hide.
Problem: When I click on "Add" to add a new help section to the helper, I need a new variable to set the visibility of this new element (a div). The problem is that it takes the previous variable to decide the visibility of this new element.
I have tried to create a list $scope.listOfVilibilities pushing a new item every time I create a new help section.
How can I create new variables in the scope "on the fly" and bind them in the view?
Try creating objects into a array and use ngRepeat directive to add this new object into view.
for example controller:
function MyCtrl($scope) {
$scope.list = [];
$scope.add = function(){
$scope.list.push({value:void(0), disabled: false});
}
$scope.delete = function(value){
$scope.list = _.remove($scope.list, function(n){
return n.value !== value;
});
}
}
Important! I used lodash library in the delete function. Doc. here
The HTML look like this:
<div ng-controller="MyCtrl">
<button ng-click="add()">
Add
</button>
<ul>
<li ng-repeat="some in list">
<input ng-model="some.value" ng-disabled="some.disabled"/>
<button ng-click="some.disabled = !some.disabled">
{{!some.disabled}}
</button>
<button ng-click="delete(some.value)">
Delete
</button>
</li>
</ul>
</div>
Take a look to this example live in jsfiddle.
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 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.
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.