I am having the following code:
var vocabularies = new MyDataService.myService();
vocabularies.success(function (data) {
console.log(data);
}).error(function (data) {
console.log(data);
});
Where can I view the value of data instead of debugging the above code?
If you want to view the data present in the console then you may use keyboard shortcut Ctrl + Shift + J to bring focus on the console.
If you want to see your data during execution you may use alert instead of console.log.
If you want to bind your data to the HTML you need to use
$scope.variable=data;
you can then get your value by using expression tag in HTML.
{{variable}}
You can assign your data to a $scope variable. And on template you can view it. Find below code:
var vocabularies = new MyDataService.myService();
vocabularies.success(function (data) {
console.log(data);
$scope.viewData = data;
}).error(function (data) {
console.log(data);
$scope.viewData = data;
});
And then on the template:
{{viewData | json}}
The above will print it in json format if its json else normal text
Related
I'm writing
angularjs/nodejs
I useed $http service to load my data from database and ngRepeat directive to display it into the view. What I can't do is when I add new item to database, update my view with just one item, and do it with animation.I know need to use ngAniamte and set class on ng enter but how do i push single item into data array without reloading the whole view?
Data Load and Insert
vm.loadData = function () {
$http.get('/data')
.success(function (data) {
vm.data = data;
})
.error(function (data) {
console.log('Error: ' + data);
});
}
http.post('/data', data).success(function (data) {
})
I assume vm.data is an array? You should not reassign the complete array but rather add new items to it, delete old items from it and/or update items in it. You can add new items with vm.data.push() and add/delete items with vm.data.splice(). To do this, you need to compare vm.data with data to determine which items need to be added/deleted/modified.
I am trying to use angular-resource.js file in my demo .I am retrieving
data from json file using $resource and display my data using ng-repeat .But Each item I added one button (info text button).I need to get it infomation using $resource property.I am sending ID on click function .but when I am using $resource property it gives error to me
$scope.getIn=function(id){
// alert(id)
$scope.oneUser = Entry.get({user: id});
console.log($scope.oneUser)
}
here is my code
http://plnkr.co/edit/lB11oQkQjbILK36u8V25?p=preview
If i understand correctly what you are trying to achieve this should solve it:
angular.module('app',['ngResource']).controller('a',function($scope, GetData){
// read data from factory and store it in $scope.posts
GetData.then(
function successCallback(data) {
$scope.posts = data.data;
},
function errorCallback(response) {
console.log(response); // handle any errors
});
// buttonclick to return the values from the selected id
$scope.getIn = function(id){
angular.forEach($scope.posts, function(value) {
if(value.id === id)
{
$scope.selectedValue = value;
}
})
};
console.log($scope.posts)
})
.factory('GetData', function($http){ // use http to read the json
return $http.get('data.json');
});
And the html:
<body ng-app='app' ng-controller='a'>
<div ng-repeat='p in posts'>
<span>{{p.name}}</span>
<button ng-click=getIn(p.id)>info</button>
</div>
{{selectedValue}}
</body>
in my Angular JS application, in view folder, in layout.jade file I use bootstrap "nav.navbar.navbar-inverse" from "http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php" and I did one change in the following line.
input.form-control(type='text', placeholder='Search')
to
input.form-control(type='text', placeholder='Search' ng-model='searchText')
Then, I use another jade file vieworder.jade, here is the content
extends layout
block content
table.table.table-striped(ng-app="vieworder", ng-controller="viewordercontroller" border='1', cellpadding='7', cellspacing='7')
thead
tr
th(width="10%") Customer Name
th(width="10%") Order Type
th(width="10%") Orders
th(width="10%") Order Date
th(width="10%") Order Status
td(width="10%")
tbody
tr(ng-repeat='Order in Orders | filter:layout.searchText')
td {{ Order.custname }}
td {{ Order.ordertype }}
td {{ Order.noorder }}
td {{ Order.orderdate }}
td {{ Order.orderdate }}
td
a.btn.btn-small.btn-primary(ng-click='cancelOrder(Order.id)') cancel
Now, when I run, I got all the order list in my vieworder page, which is working perfectly. Now I want to apply filter to the table content. For that I use 'searchText' ng-model. But when I type any alphabet to the search field, filter is not working. Please help me..
Here is the controller code
var order = angular.module('vieworder', []);
order.controller('viewordercontroller', function ($scope, $http, $window){
$http.get('/viewalloders').
success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
$scope.Orders = data;
console.log(data);
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("error");
});
console.log("santanu");
$scope.cancelOrder = function (id) {
var path = '/deleteorder/' + id;
var input = [];
input.id = id;
$http.put(path, input).success(function (response) {
console.log("success"); // Getting Success Response in Callback
}).
error(function (response) {
console.log("Santanu :error"); // Getting Error Response in Callback
});
}
});
If you are using same controller for both the views, then you don't need to use layout.searchText. Simply, use searchText since $scope is shared across entire controller. You can directly access it.
If you are using a different controller for both the views, then $scope is different for both the views. In that case you can define your searchText something like:
In your Navbar controller:
$scope.object = {};
$scope.object.SearchText = "someVal";
and then use this as "Order in Orders | filter:'object.searchText'" in your viewOrderController.
Let me know if this doesn't work
Thanks
I fetch a collection from the server and I would like to get detail for each item. All requests are received correctly, but the paragraph Loading... doesn't hide.
<h2 ng-repeat-start="server in hypervisors track by server.ip | orderBy:server.ip">
{{server.ip}}
</h2>
<div ng-repeat-end>
<p ng-hide="{{server.loaded}}" class="ng-hide">Loading...</p>
When I uncomment the line in controller before post everything works fine.
vmwareStatusApp.controller('Home', function ($scope, $http) {
$http.post('Home/ListHypervisors').success(function (data) {
$scope.hypervisors = data;
$scope.listLoaded = true;
$scope.hypervisors.forEach(function (item) {
//item.loaded = true; // this line works
$http.post('Home/HostInfo', { 'ip': item.ip }).success(function (data) {
$scope.hypervisors[0].loaded = true;
item.loaded = true;
item.detail = data;
})
.error(function(data) {
item.loaded = true;
item.error = data;
item.displayError = true;
});
});
});
});
There are many posts about refreshing view, but I haven't found any working for me. Neither anti-patter with calling $digest() didn't work, because of multiple callback. Which part of AngularJS tutorial have I skipped?
Just remove the braces from your ng-hide like this
ng-hide="server.loaded"
ng-hide and angular directives should be read like this :
ng-directive = "somethingAngularWillInterpret"
The opposite exemple is in your HTML angular will not know what he should interpret instead of just showing some text
<b>server.loaded</b> will show a bold "server.loaded"
To notice angular that he need to interpret we will use the braces
<b>{{somethingAngularWillInterpret}}</b> will show a bold result of the interpretation
EDIT :
So doing this ng-hide="{{server.loaded}}" is probably saying to angular to interpret the result of the server.loaded interpretation like a var named true or a var named false (just speculation, i need to try it).
Just tested it, this just lead to a syntax error.
I have an angularjs web page page which allows me to edit some fields. I load the data from my DB, edit it in the page then save the revised data back to the DB. the DB api requires me to submit for amendments the existing DB data and the revised data. Unfortunately when I save the existing data it is binding to the change which I don't want to do !
function providerCtrl($scope, $location, $routeParams, $http)
{
$scope.getProvider = function () {
$http.get(
'/admin/api/'+$routeParams.channel+
'/'+$routeParams.provider).success(function(data){
inputData = data[0];//i want to save this initially but never have it change again, unfortunately its binding with this $scope.settings field changes :-(
$scope.settings = data[0];
});
}
$scope.amendProvider = function (settings) {
console.log($scope.inputData);
var data = {'old': inputData, 'new' : $scope.settings}
console.log(data);
$http({
url: '/admin/api/' + $routeParams.channel + '/' + $routeParams.provider,
method: "PUT",
data: {'old': inputData, 'new' : $scope.settings}
})
.success(function(data){
});
}
$scope.settings = {};
var inputData = {};
$scope.getProvider();
}
when I save the existing data it is binding to the change which I don't want to do !
use angular.copy() utility to clone new instance.
See Documentation HERE