I am working on angularjs and faced a problem while displaying the details of each record on another page.The list of records are displayed using controller and each record has a link, on click of which i want to pass the id of the selected item to the same controller so that using this id I can display respective data.This is what i have done
<tr ng-repeat="doctor in doct| filter:name" ><td><a href="" ng-click="showid(doctor.contactId)" >></a><td></tr>
this is the code in js file:
app.controller('Mycontroller', function Mycontroller($scope,$http){
$scope.showid=function(idPassedFromNgClick){
var v=idPassedFromNgClick;
console.log(v);
$http.get('scripts/doc.json').success(function(data){
$scope.doct=data;
};
});
});
here i am passing the id in function showid. In console i am able to get the respective id.But i cant use it outside the scope of my function(showid).Plz suggest me a way to get it globally so that i can use it in details page.
Related
I've the following code that displays table of data using ng-repeat, initially the model (array) will have no data, but upon request to an api it receives some data that i'm trying to update my model with, but unfortunately my view is not getting refreshed with model updates though I see that my model contains the new data that was received from api call.
Component code:
app.component('fooList', {
bindings: {
foo: '<'
},
templateUrl: '/app/foo.html',
controllerAs: 'list',
controller: function ($http,$scope) {
let list=this;
list.search=()=>{
$http.get('/ui/foo/'+ list.searchCriteria)
.success(response=>{
list.foo.searchResults=response.searchResults;
})
}
}
});
HTML View:
<tr ng-repeat="foo in ::list.foo.searchResults">
<td>{{::foo.name}}</td>
<td>{{::foo.address}}</td>
</tr>
I've tried the following so far which didn't help
Setting the list.foo.searchResults to undefined initially, which is working fine for the first time, but if I send a different search criteria then again it is not refreshing.
$scope.$apply(), which I hate to do, but tried which is throwing digest in progress error.
Inside the success of $http i've tried the below code
list.foo.searchResults=0;
list.foo.searchResults.push.apply(list.foo.searchResults,response.searchResults);
Created one more child component and replaced my html with the child template and moved the code to populate the array in to that component.
Any help is really appreciated.
You have to remove one time data binding.
<tr ng-repeat="foo in list.foo.searchResults">
<td>{{foo.name}}</td>
<td>{{foo.address}}</td>
</tr>
Try removing :: or can you give a jsfiddle to work on
:: is used to provide one way databinding , please remove it and then try
::if you are using this, even if your model is getting updated it will not allow to update view.
You may try to update in the view section while you are fetching data from service, use $scope.$apply() in your controller section, where your are taking value from service(means storing in array).
or remove :: from your html part because its give to one way binding in angularjs.
I am still new to the concept of MEAN Stack and right now i am trying to display a list that I get from the Asana API in a simple website that I made. My issue is that in order to get the list that I need from Asana I use nested functions and I have no clue how to send the result to my frontend.
var callback = function() {console.log("test")};
client.projects.findAll(callback).then(function(projects) {
projects.data.forEach(function(project){
var id = project.id;
var name = project.name;
console.log(name);
});
});
If I run the program I do get the list that I want inside my console and would like to know how to display the list from index.html file. Basically how to send the name variable to the frontend.
You need to insert your values in your $scope, for example:
client.projects.findAll(callback).then(function(projects) {
$scope.projects = projects;
});
and then in your HTML use an ng-repeat to display the values, for example:
<div ng-repeat="project in projects | track by $index>
<span>{{project.value}}</span>
</div>
This way, you'll create a div for every project element inside your array, displaying his property .value (but you can substitute .value with any of your properties) with the brackets notation {{ }}
I am working on an application were index page and inside that I am showing multiple views, In index nav bar I have to show notification count and User name which comes from 2 different controllers,
I am able to display the notification count and User name successfully, but the issue is the values are not changing dynamically.
We need to refresh the page for the new values.
What can I do in this situation can any one please guide me.
I'm guessing you're watching the value directly and not by some object wrapper. In this case javascript isn't actually updating the variable, but assigning a complete new one. Anything out of the function scope that updates the variable will never receive the new value.
The solution is simple; wrap the value in an object and share/inject that object.
angular.module('myApp')
.value('myPageState', {
notificationCount: 0
});
angular.module('myApp')
.controller('myController', function($scope, myPageState) {
$scope.myPageState = myPageState;
});
<div class="my-notification-thingy"> {{ myPageState.notificationCount }} </div>
You can achieve it by:
Maintain those values in rootScope so that you
will have the two way binding.
Making use of emit to notify the parent controller about value changes. This will work only if those two controllers are present in child elements.
In child controllers fire event on value update:
$scope.$emit('valueChanged', {value: val});
In parent controller receive event value:
$scope.$on('valueChanged', function(event, args) {
console.log(args.value);
});
I'm working on an e-commerce like webapp to learn Angular. I have a menu on my home page (common and visible on all pages), which provides available products for e.g. Books, Clothes etc.
On my menu I have list items as follows:
<li>Computers</li>
<li>Academics & Professional</li>
searchProduct function in my first controller sets the selected product in scope and sets the location.path.
$scope.searchProduct =function(productTBSearched){
$scope.TBFProduct=productTBSearched;
$location.path("/SearchProducts");
}
I also have route provider in my first controller which refers to another html and 2nd controller.
$routeProvider.when("/SearchProducts", {
templateUrl: "./views/HomeSearchProducts.html" ,
controller: "productSearchCtrl"
});
In my second controller, I call a REST WS to search DB and build my Response JSON. The issue is when I click on the first item on menu at home page, I get search results and I can see my URL gets changed to ".......Index2.html#/SearchProducts"
Now at this page when I try to choose another menu item, Routeprovider does not call the "ProductSearchCtrl" again and no Ajax call is executed for newly selected item. Could anyone help on this?
I think you are trying to reload the route. You can update your code to something like below in order to reload the route.
$scope.searchProduct =function(productTBSearched){
$scope.TBFProduct=productTBSearched;
if($location.path() === "/SearchProducts") {
$route.reload();
} else {
$location.path("/SearchProducts");
}
}
I am facing problem to update my model values from custom directive using controller as syntax. I can clearly see that through console.log that the values are getting changed in the directive however they are not getting updated in the controller. <h4>{{self.tabs}} </h4> always shows same values.
In addition I want to do watch on controller (self --> tabs) model to add 'active class' but when I try to use watch it is throwing me out error. So I have commented that part. The following is the watch related code, which is not working:
$scope.$watch('tabsCtrlself.tabs.index', function() {
if (tabsCtrlself.tabs.index === index) {
angular.element($element).addClass('active');
}
});
Please find my plunker, Can any one direct me to fix this?
you can use 'ng-class' attribute,eg:
<en-tab data-pane="myPaneName1" ng-class="{active:index==1}">Tab #1</en-tab>
<en-tab data-pane="myPaneName2" ng-class="{active:index==2}" >Tab #2</en-tab>
<en-tab data-pane="myPaneName3" ng-class="{active:index==3}">Tab #3</en-tab>
'index' is a object in angular: $scope.index, initializes its value:
$scope.index=1;
The first item is selected by default.
I think the object of 'tabsCtrl.tabs.index' is not a angular object, so can't auto refresh