So I have a link in an html box and when clicking the link iam trying to have it show a whole new set of divs replacing the present divs.
I tried :
<a href="" ng-click="Search('Show Products A B C')" > Show Products </a>
Search calls in the function in the controller which returns the data for the A B C products, which are then displayed using
<div ng-repeat="products in Search( 'Show Products A B C')" </div>
I am basically trying to do something like this:
<div ng-repeat=" href="" ng-click="Search('Show Products A B C')"> </div>
which is not proper syntax I understand.
But right now nothing happens.
Basically from that ng-click i would like to call that portion of the code (ng-repeat) because right now they are not connected.
thanks
ng-repeat will respond to changes in its argument, but your argument is a function Search(). I would suggest the following:
In your search function:
$scope.Search = function(arg) {
// do your search logic
$scope.productList = <search result list>
}
then in html
<div ng-repeat="products in productList" </div>
What you should do is to have some array or object A bound to $scope, then when you call search you update A and the changes will be reflected on your view
$scope.show=true;
$scope.products =[A,B,C];
$scope.Search = function() {
// do list update
$scope.show=false;
$scope.products =[D,E,F] ;
}
You also need to change ng-repeat to this:
<div ng-repeat="product in products" </div>
And add ng-show to the first link:
Click Me
Edit:
Check this fiddle for a working example.
Edit:
Fiddle updated reflecting latest changes.
Related
I am facing some issue. I have some nested controller within one parent controller and I need it to execute as per some condition using Angular.js. I am explaining my code below.
NABH.html:
<div ng-controller=NABHParentController>
<div ng-show="showNabh">
<div ng-include="'nabh1.html'"></div>
</div>
<div ng-show="showNabh1">
<div ng-include="'nabh2.html'"></div>
</div>
</div>
nabh1.html:
<div class="right_panel" style="display:block;" id="auditnabh" ng-controller="NABHController">
<td class="sticky-cell" ng-click="initiateNABH(nabh.NABHAuditID)">
</td>
</div>
nabh2.html:
<div class="right_panel" ng-controller="NABH2Controller">
<h2 class="page-title">NABH (INT012017001)</h2>
<div>
NABHParentController.js:
var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
$scope.showNabh=true;
$scope.showNabh1=false;
})
NABHController.js:
var app=angular.module('demo');
app.controller('NABHController',function($scope,$http,$state,$window,$location,$filter,getBothIdToAuditDetailPage)
{
$scope.initiateNABH = function(aid) {
$scope.$parent.$parent.showNabh=false;
$scope.$parent.$parent.showNabh1=true;
}
})
Here Initially all controller are loading and nabh1.html is displaying first. When user will click on that td click event the second part html is showing. Here I need when user will click on that ng-click="initiateNABH(nabh.NABHAuditID)" the second view will open and the resepective controller will start execute. Initially only displaying view related controller will execute. Please help.
It sounds like using ng-if instead of ng-show will solve your problem:
<div ng-if="showNabh">
<div ng-include="'nabh1.html'"></div>
</div>
<div ng-if="showNabh1">
<div ng-include="'nabh2.html'"></div>
</div>
The difference is that while ng-show will "only" hide the element using css when the expression is falsy, ng-if will not create the element if it's falsy and as a result will not initiate the controller until ng-if is truthy.
Also, I would probably move the initiateNABH function to the parent controller - it will still be available in the child controller but makes the code less likely to break since you don't have to use $parent:
var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
$scope.showNabh=true;
$scope.showNabh1=false;
$scope.initiateNABH = function(aid) {
$scope.showNabh=false;
$scope.showNabh1=true;
}
})
I'm new to AngularJS. I'm converting some pages to AngularJS. I just displayed rows of information. However I'm having trouble converting the button onclick part to AngularJS. Can someone please help me. Below is the code that I'm working with.
<div ng-repeat="i in data">
<p>{{i.name}}</p>
<button class="btn btn-xs btn-default" data-toggle="modal" data-target=".show-ticket-details-modal" onclick="show_details(10)">
<i class="fa fa-info"></i>
</button>
</div>
Just pass the model to show_details method
show_details(i)
Regards,
Try using ng-click (https://docs.angularjs.org/api/ng/directive/ngClick). This runs a function in your angular controller when you click an element. All you've got to do is add the ng-click directive to your element, and then build a function with the same name in your angular controller to handle the data.
IE, replace onclick="show_details(10)" with: ng-click="show_details(10)".
Then, in your controller, build a function with the same name that will handle the data show_details(10), like:
$scope.show_details = function(index) {
console.log(index); // will log 10 in the example above
// do stuff with your index here,
// pass data to your angular factory, etc.
};
Note: For <form> elements, you can use the ng-submit directive instead (https://docs.angularjs.org/api/ng/directive/ngSubmit). Just use ng-submit="someFunction()" instead of ng-click.
Another Idea:
Instead of passing in the number 10, you could also use track by $index (https://docs.angularjs.org/api/ng/directive/ngRepeat#), for example, in your ng-repeat, you could:
ng-repeat="i in data track by $index"
Now, you can actually just pass $index into your ng-click function, instead of the number 10:
ng-click="show_details($index)" // $index will be 10, if the index of `i` was 10 in `data`
Hope this helps somewhat, let me know if you have any questions! The links included show more examples of their usage!
I called ng-click like this:
<div ng-repeat="(key,value) in filterdata">
<div ng-click="filter(key,value)">
{{key}} ::::::: {{value}}
</div>
</div>
and my Controller function looks like this:
$scope.filter = function(key,value){
$location.search(key, value);
var filter = $location.url();
service.get(filter).success(function(data) {
$scope.applicationdata = data.data;
console.log($scope.applicationdata);
});
}
and my HTML file has ng-repeat like this:
<div class="resultsa" ng-repeat="data in applicationdata">
{{data.name}}<hr>
<div ng-repeat="metadata in data.metadata">
{{metadata.name}} , {{metadata.pivot.value}}
<hr>
</div>
</div>
The first time I click, my service function is called and my model is updated but my view doesn't update. When I click a second time, my view properly updates. Can anyone tell me why this happening?
This is because you are changing the value of the model after the digest cicle was triggered, and in a different context. For solving this you need to call $scope.$apply() after setting the application data, for triggering another digest cycle.
i would like to have a list with entries of objects. If i click on an entry in that list i want to see the details of the object and an edit button on an area at the right side of the list. If i click that button the details disappers and a form to edit the object should appear.
html
<table class="table table-striped">
<tr
ng-repeat="object in objects"
ng-click="select(object.id)"
>
<td>{{object.name}}</td>
</tr>
</table>
<button ng-click="edit(selectedObject.id)">Edit</button>
<div class="view">
Name: {{selectedObject.name}}
</div>
<form>
<label>Name</label>
<input ng-model="object.name">
</form>
controller.js
myModule.controller('MyController', function($scope, MyService) {
$scope.objects = MyService.getObjects();
$scope.select = function(id) {
$scope.selectedObject = angular.copy(MyService.getObject(id));
};
$scope.edit = function(id) {
...
};
});
In the edit function i could use the selectedObject, but maybe in future i also want to edit the object directly without selecting it before. So first i could do the same like in the select function but then i would call the service twice to receive the same object...
Also i don't know really how to handle the toggle between view- and editmode.
Thanks in advance!
You should give the detail view and the edit form their own Controller, that way they're ready to be seperated.
Also a strong recommendation is using https://github.com/angular-ui/ui-router Nested-Views and Multiple/Named Views to manage your controllers.
You can then make the list view the parent and add the other 2 as child views with their own url like /item/:id/view and /item/:id/edit, see $stateParams for getting the values from the URL.
I am not 100% sure about your question but you could show/hide the input
$scope.edit = function () {
$scope.editmode = true
};
and
<div class="view" ng-show="!editMode">
Name: {{selectedObject.name}}
</div>
with
ng-show="editmode"
on the input
or you could use
ng-readonly="!editmode" on the input (then you won't need another div to display the name)
If your planning to display obejcts has a table, please consider ngGrid which allows editing inside the grid itself
I need to make a manipulation with DIV element that is a result of ng-repeat:
<div ng-repeat="data in info" >
<div id='plot_{{data.id}}'></div>
</div>
My sequence is as follows:
I add information in $scope.info
ng-repeat happens
after DIV is generated (as you can see, it has also the dynamically assigned ID), I need to call a particular routine to insert a plot into that DIV.
How I can code the step 3 to happen right after ng-repeat rendering happens?
Create a directive to go on your generated div, and insert your plot within the directive.
app.directive('plot', function(){
return function(scope, element, attrs){
//Insert plot here
//Maybe something like: $.plot(element, yourData);
console.log('directive ' + scope.data.id + ' done');
}
});
HTML:
<div ng-repeat="data in info" >
<div id='plot_{{data.id}}' plot></div>
</div>
Demo