I have a ng-repeat under that
i have ng-click
like
<div ng-repeat="">
<div ng-click="someFunction(name)"></div>
<input type="text" class="common btnDarkGrey editDashboardCategory" data-ng-model="inputCategory" ng-hide="!item.show">
</div>
Now my code
$scope.someFunction = function(name) {
$scope.scroller.items[index].show = true;
$scope.inputCategory=name;
});
Which is working fine on very first click.
When i click second time. my first div pick second value
Any idea ? how to do this
Thanks
If you want individual showName values per rendered row you need to set it to individual child scope. Right now you are setting the value to the parent scope showName which is shared by all child scopes ngRepeat creates.
The simple fix is to refer child scope with this keyword:
$scope.someFunction = function(name) {
var new_name = /* some other calculations */
this.showName = new_name;
};
Related
I have an ng-repeat listing items with a button inside, which updates certain info from this item into the DB and then retrieves the new object.
I'm trying to show a loading gif while this happens, but so far the gif appears on all items of the ng-repeat, as I'm using a $scope variable.
Like so:
<div ng-repeat="fair in allfairs">
<img ng-show="loading" src="../images/loading.gif">
<a ng-click="deactivate(fair)" ng-if="!loading">Deactivate</a>
</div>
And in the controller:
$scope.deactivate = function(fair){
$scope.loading = true;
var $promisedb=$http.post('databaseconnect/updatefair.php',$scope.activated);
$promisedb.then(function (data) {
$scope.loading = false;
});
};
How could I achieve the same but only for the particular item that I'm clicking on without affecting the whole array?
Assign the item to a scope variable instead and compare item to that scope variable in ng-if
$scope.deactivate = function(fair){
$scope.loadingItem = fair;
var $promisedb=$http.post('databaseconnect/updatefair.php',$scope.activated);
$promisedb.then(function (data) {
$scope.loadingItem = false
});
};
View
<a ng-click="deactivate(fair)" ng-if="loadingItem != fair">Deactivate</a>
You can chain the img element and a element together via $index of the array allfairs,and you must change the type of loading to object {},when you click the a element,you should add a item to loading,and you can take the $index as the key of item.The loading gif which has a $index will be affected by same $index which has clicked on a element. The code looks like below:
<div ng-repeat="fair in allfairs">
<img ng-show="loading[$index]" src="../images/loading.gif">
<a ng-click="deactivate(fair,$index)" ng-if="!loading[$index]">Deactivate</a>
</div>
$scope.loading = {};
$scope.deactivate = function(fair,index){
$scope.loading[index] = true;
var $promisedb=$http.post('databaseconnect/updatefair.php',$scope.activated);
$promisedb.then(function (data) {
$scope.loading[index] = false;
});
};
This is a little difficult to explain since I can't extract the code that I'm having the most difficulty with. The best I can do is a simple fiddle of what I'm trying to accomplish: https://jsfiddle.net/yLkukw5p/
HTML:
<div ng-app = "myApp" ng-controller = "parentController" ng-switch = "properties.selectedMethod">
<div ng-controller = "childController" ng-switch-when = "id">
<a ng-click = "survey()">
Change div
</a>
</div>
<div ng-switch-when = "date">
div changed
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.factory('vars', function() {
var properties = {};
properties.selectedMethod = 'id';
function setselectedMethod(string){
properties.selectedMethod = string;
}
return {
properties : properties,
setselectedMethod : setselectedMethod
};
});
app.controller('parentController', function($scope, vars) {
$scope.properties = vars.properties;
$scope.setSearchMethod = function(method){
vars.setselectedMethod(method);
}
});
app.controller('childController', function($scope, $rootScope, $http, vars) {
$scope.properties = vars.properties;
$scope.survey = function() {
vars.setselectedMethod("date");
}
});
Basically, I want to be able to change the variable value in a factory shared between child and parent controllers. The only hiccup I'm running into is that in my case, the child div is dynamically generated, and that seems to be the only thing different between the fiddle and my code. I have some JavaScript that adds this DOM:
<div onclick = angular.element('#anotherdiv').scope().setSearchMethod('id');> More Info </div>
where anotherdiv is a div within the childController. When I click this div, I know by debugging that it runs the code in the vars factory, but it doesn't update other values? I'm using the "dot" trick so I would think the variables are references and not "shadowing" as some other posts suggested. Any thoughts?
EDIT: Updated the fiddle to be more accurate: https://jsfiddle.net/yLkukw5p/1/
It looks like the onclick function using angular.element is the one causing trouble, but I don't know how to work around it.
I have an object made like this:
var examples = {
'example1': {
ex1: {},
ex2: {},
ex3: {}
},
'example2': {
ex1: {},
ex2: {},
ex3: {}
}
}
There is a button linked to a function which fills the example1 object with values on the first click, and the example2 object on a second click.
First click: example1 get values.
Second click: example2 get values.
Then i loop through the object using ng-repeat, like this:
data-ng-repeat="example in examples.example1.ex1"
data-ng-repeat="example in examples.example1.ex2"
data-ng-repeat="example in examples.example1.ex3"
The problem here is, i need the ng-repeat to somehow change and loop through the example2 object aswell when the button is clicked a second time. So my question is, is there a way to change ng-repeat dynamically?
EDIT: The goal is for the first list of appear after the first click, and then for BOTH lists appear together after the second click.
I tried to make a $scope with the value 2 and put it in the ng-repeat, but that didn't work.
$scope.counter = 2; //in a controller
data-ng-repeat="example in examples.example(counter).ex1"
Use dynamic property name
$scope.prop = 'example1';
$scope.click = function (newProp) {
$scope.prop = newProp;
// do whatever you want here
// change prop to example2 or
// or simply toggle Boolean to change prop text
}
And in html use
ng-repeat="example in examples[prop].ex1"
Would it be a solution to loop through "examples" instead, and then have a ng-repeat inside an ng-repeat?
Something like this:
<div data-ng-repeat="example in examples">
<div data-ng-repeat="ext in example">
{{ext.ex1}} {{ext.ex2}} {{ext.ex3}}
</div>
</div>
Do something like Jannik's answer in the html and this in the JS:
$scope.examples = {};
function example(exes) {
this.exes = exes;
}
$scope.onClick = function(exes) {
$scope.examples.push(new example(exes));
}
The exes is a list of ex1,ex2,etc. You may need a $scope.$apply() at the end of this to update the UI.
I have the following ng-repeat in my HTML code:
<div ng-repeat="a in items">
<div>
<span>{{a.name}}</span>
</div>
<div>
<select ng-model="a.c_id" ng-options="d.c_id as d.description for d in loclist" ng-disabled="display" ng-change="selected(a.c_id)">
</select>
</div>
Then in my controller I have:
$scope.display = false;
$scope.selected = function (value) {
$scope.te = value;
if ($scope.te == 3) {
$scope.display = true;
}
};
Problem I am facing is that when I change the selection in the drop down it is supposed to disable or enable the dropdown based on value. However when I change the selection in one of the drop down that has value of 3 all the dropdowns change to disabled state rather than that particular one.
Please let me know how to fix this code so when after ng-repeat has displayed all rows and I change the dropdown value of one of the rows it just disables that particular one rather than disabling all the dropdowns in all rows.
Angular ng-repeat creates child scopes inherited from parent scope. In your case, all your ng-repeat's scopes inherit the display property from parent scope. Therefore when this property changes, it reflects on all scopes.
Try this instead of $scope to access the current scope of ng-repeat:
$scope.selected = function (value) {
this.te = value;
if (this.te == 3) {
this.display = true;
}
};
So, I'm new to AngularJS and I'm trying to change a div content after another is clicked (this one holds a div with the content that I want to put on the first one).
HTML
<div ng-controller="dCtrl">
<ul ng-repeat="product in products">
<li change>
{{product.name}}
<div class="hide">{{product.description}}</div>
</li>
</ul>
</div>
<div id="test"></div>
Javascript
var app = angular.module("dt", []);
app.directive("change", function() {
return function(scope, element) {
element.bind("click", function() {
var message = element.children("div").text();
console.log("breakpoint");
angular.bind("#test", function() {
this.text(message);
});
})
}
})
app.controller("dCtrl", function($scope) {
$scope.products = [
{ "name" : "Escova XPTO", "description": "Lava tudo num instante"},
{ "name" : "Pasta de Dentes YMZ", "description": "Dentifrico do camandro"}
];
})
I know that I could just say:
$("#test").html(message);
But I'm still confused about mixing jQuery and AngularJS, I dont know if that is a correct way of doing it
Thanks
Setup ng-click:
ngClick is for doing things such as the scary jQuery-esque stuff you have going on in your change directive. Place ng-click in your clickable div's attributes and pass in a method that changes the $scope variable accepted by...
ngShow and ngHide.
When true these directives, as the name states, show or hide the associated html object. You can pass in $scope variables determine the boolean value. When the $scope updates these methods automatically update the DOM to show/hide the element.