How to parse and use a json object passed from parent page? - javascript

I apologize in advance if this has already been answered. I've Googled around for a few hours now, and I still haven't found anything that seems to answer my exact question.
Here is my code:
<ion-content>
<div class="list">
<div style="padding: 0px; margin: 0px;" class="item">
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
{{x.order_id}}
</div>
<div class="col left">
<a ng-href="#/tab/orderdetails?detail={{x.detail}}">订单详情</a>
</div>
</div>
</div>
</div>
</ion-content>
x.detail is the json object i want to pass to the newly opened page "orderdetails.html":
<script id="templates/orderdetails.html" type="text/ng-template">
<ion-view view-title="OrderDetails">
<ion-content class="padding">
<p>Here I want to display order details...</p>
var obj = this.href.split('?')[1];
console.log(obj);
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
</p>
</ion-content>
</ion-view>
</script>
app.js:
.state('tabs.orderdetails', {
url: "/orderdetails",
views: {
'home-tab': {
templateUrl: "templates/orderdetails.html"
}
}
})
I want to know how to parse and use the passed object in "orderdetails.html". Thanks.

You can just pass the data as state params like this below.
<ion-content>
<div class="list">
<div style="padding: 0px; margin: 0px;" class="item">
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
{{x.order_id}}
</div> <div class="col left">
<a ng-href="#/tab/orderdetails/{{x.detail}}">订单详情</a>
</div>
</div>
</div>
</div>
</ion-content>
and recieve it in state params like this below.
.state('tabs.orderdetails', {
url: "/orderdetails/:whateverdata",
views: {
'home-tab': {
templateUrl: "templates/orderdetails.html"
}
}
})
you will get the data in your controller for orderdetails tab as $stateParams.whateverdata

Related

AngularJS iterating through Eventbrite events

My Json file is here.
My HomeController is:
app.controller('HomeController', ['$scope', 'events', function($scope, events) {
events.then(function(data) {
$scope.events = data;
});
$scope.test="success";
}]);
and my html file is:
Home
<h1> {{test}} </h1>
<section class="container" ng-repeat="event in events">
<div class="col-sm-4" >
<div class="card">
<img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" />
<div class="block">
<h4 class="card-title">{{event.events[0].name.text}}</h4>
<p class="card-text">{{event}}</p>
Go somewhere
</div>
</div>
</div>
</section>
<h1>{{test}}</h1>
My problem occurs when I am trying to loop over "events" array in the JSON file.
I have tried to write "$scope.events = data.events;" in Home controller, " ng-repeat="event in events.events"" or "ng-repeat="event in events[0]"" in html file. This breaks loop and nothing is shown, but if I use "ng-repeat="event in events"" and then variable {{event.events[0].name.text}} in the code later on, it all works fine. I don't understand why there is a problem. It should work fine from my previous experience.
If you declare in your controller
$scope.events = data.data.events;
and have such template:
<section class="container" ng-repeat="event in events">
<div class="col-sm-4">
<div class="card">
<img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" />
<div class="block">
<h4 class="card-title">{{event.name.text}}</h4>
<p class="card-text">{{event}}</p>
Go somewhere
</div>
</div>
</div>
</section>
it should work. See codepen here

Angular 1 ui-router duplicating views

I've got a router setup like this:
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get("$state");
$state.go('app');
});
$stateProvider
.state('app', {
templateUrl: 'index.html',
controller: 'AppCtrl',
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('shared');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['ui-bs-paging', 'ui-bs-modal']).then(
function() {
return $ocLazyLoad.load(['app/shared/controllers/AppCtrl.js']);
}
);
}
]
}
.state('app.shares', {
url: "/shares",
templateUrl: "app/modules/shares/views/shares.html",
controller: 'ShareCtrl',
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('modules/shares');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['ShareServiceModule']).then(
function() {
return $ocLazyLoad.load(['app/modules/shares/controllers/ShareCtrl.js']);
}
);
}
]
}
})
});
And on my index is like:
<div id="page-content-wrapper">
<div class="row header" id="header">
<div class="col-xs-6">
<a href="##">
<img class="svg-1 pull-left" src="assets/img/header_logo.svg" alt="Pwc">
</a>
<i class="separator pull-left"></i>
<h1 class="header-text pull-left"> Sustainability Tool </h1>
</div>
<div class="col-xs-6">
<button type="button" ng-class="hamburger" class="hamburger animated fadeInLeft" data-toggle="offcanvas" ng-click="sidebarClick()"><span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span></button>
</div>
</div>
<!-- main app content ui-view include -->
<div ui-view data-anim-sync="true" class="anim-in-out anim-slide-below-fade" data-anim-speed="500">
<div class="home">
<section class="banner">
<img src="assets/img/home_hero.jpg">
</section>
<section class="intro">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>{{'pwc.sus.home.intro.title.label' | translate}}</h1>
</div>
<div class="col-md-12">
<h2>{{'pwc.sus.home.intro.subtitle.label' | translate}}</h2>
</div>
<div class="col-md-4 col-md-offset-4">
<p>{{'pwc.sus.home.intro.description.label' | translate}}</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>
<h1>{{'pwc.sus.home.features.title.label' | translate}}</h1>
</h1>
<p>
<h1>{{'pwc.sus.home.features.title.label' | translate}}</h1>
</p>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="footer section">
<div class="row disclaimer">
<div class="col-xs-6">
<span class="footer-text footer-text-hack">© PwC, 2016. All Rights Reserved.</span>
</div>
<div class="col-xs-6">
<span class="pull-right footer-text"> Legal Disclaimer </span>
</div>
</div>
</div>
</div>
The router is working correctly but the header and all the footer content are duplicated like this (repeated ui-view):
Can someone help this Angular newbie? Tnks.

How to initialize dynamic fields generated with a ng-repeat?

If I have in my view this html code, generated dinamically with ng-repeat:
<div ng-repeat="item in selectedProcedures track by $index">
<span style="display:none;">{{item.id}}</span>
<div class="row" ng-repeat="item2 in item.serviceComposite.designators">
<div class="col-sm-10 col-md-10 col-xl-10">
<div>
<button ng-click="hidePartBindings{{$parent.$index}} = !hidePartBindings{{$parent.$index}}" style="background: none; border: 0; float:left; text-align:center; margin-right: 5px;"><img src="./css/themes/parsek/img/layout/caret-blue.svg"/></button>
<span id="serviceComposite{{$parent.$index}}">{{ item2.extension }}</span>
</div>
<div class="row" id="partBindings{{$parent.$index}}" ng-repeat="item4 in item.serviceComposite.partBindings" ng-show="hidePartBindings{{$parent.$index}} === false">
<div ng-repeat="item5 in item4.part.designators">
<span class="col-sm-12 col-md-12 col-xl-12">
<a style="margin-left: 3rem;" href="#item-information" class="lightbox2" ng-click="checkIfIsModified({{item5.id}}, $event)">{{ item5.extension }}</a>
</span>
</div>
</div>
</div>
</div>
</div>
How can I initialize all generated hidePartBindings{{$parent.$index}} to true in my controller?
Thanks in advance.
You could also consider a controller for each instance of your repeated item. Of course, it would not be the best thing to do if you have hundreds of items.
<div class="row" ng-repeat="item2 in item.serviceComposite.designators" ng-controller="ItemController">
If you had fewer items and wanted to go down the route of a controller for each item, it would be a simple case of setting item.hideParts = true in your item controller.

Angular: how to loop through JSON in controller and display in view

I am learning a Angular and I'm stuck with one task. I have three parts in my app a View, service and controller,
View look like this:
<body ng-app="ForecastApp">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<p class="navbar-brand">Week Forecast</p>
</div>
</nav>
<div class="container-fluid" class="main" ng-controller="MainController">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<h2><span class="label label-info">Search for a City</span></h2>
<div class="input-group">
<input type="text" class="form-control" placeholder="City name...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">{{ fiveDay.city.name }}</h1>
<div class="forecast" ng-repeat="day in fiveDay.days">
</div>
</div>
</div>
</div>
</div>
</body>
The service look like this:
app.factory('forecast', ['$http', function($http) {
return $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
And the controller look like this:
app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
forecast.success(function(data) {
$scope.fiveDay = data;
});
}]);
Data for this lesson is take from the rest api from here http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo
How can I go throw all this json resposne and display all the items from the array "list" from this json, for example to look like this:
Date: "2015-06-12 15:00:00"
description: "few clouds"
temp: 26.82
pressure: 1015.2
As I see its simple JSON you can traverse through it using . & whenever required mention index of it to get the value.
Code
$scope.fiveDays = data.list
Markup
<div class="forecast" ng-repeat="day in fiveDays ">
<div>Date : {{dt|date: 'yyyy-dd-MM'}}</div>
<div>description: {{weather[0].description}}</div>
<div>temp: {{main.temp}}</div>
<div>pressure: {{main.pressure}}</div>
</div>
Different angular date filter format

reorder/sort ng-repeat list dynamically

I working on angularjs. I am trying to reorder the ng-repeat list.
There is list of online users.
Users can receive messages anytime. Whenever user receive the message i update the ui and show the recent message under the name.
I am trying to sort the user list based on the users who receive the recent message. The user who receive the messages should come at the top.
Some codes-
Userlist controller:
$scope.$watch('service.get.userList()', function (values) {
var result = [];
angular.forEach(values, function (value) {
processChatService.registerObserverCallback('lastMessage', function () { //i call this event when user receives the message
$scope.$apply(function () {
value.l = processChatService.get.lastMessage(value.u); //returns the recent message
value.time = processChatService.get.lastMessageTime(value.u); //returns time
});
});
value.l = processChatService.get.lastMessage(value.u); //it returns null if user havent recieve message
value.time = processChatService.get.lastMessageTime(value.u);
result.push(value);
});
$scope.users = result;
});
html:
<div ng-repeat="user in users | filter:search"> <a class="list-group-item" ng-click="click(user)" ng-href="">
<div class="row">
<div class="col-xs-2">
<div class="thumb-userlist-sm pull-left mr">
<img class="img-circle" ng-src="{{ user.p }}" alt="...">
</div>
</div>
<div class="col-xs-8">
<div class="message-sender">{{ user.n }}</div>
<div class="message-preview">{{user.l}}</div>
</div>
<div class="col-xs-2">
<div class="pull-right">{{user.time}}</div>
</div>
</div>
</a>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="line-separator"></div>
</div>
</div>
</div>
What you'll probably want to do is order the ng-repeat:
<div ng-repeat="user in users | filter:search | orderBy: 'time'">
This will order the users on the time property of each user. It's also possible to reverse the sort order with -time.
For more information on the orderBy filter, check the angular documentation.
We can do this by using orderBy.Now it depends upon the requirement.In your case it is time.
<div ng-repeat="user in users | filter:search | orderby:'time'"> <a class="list-group-item" ng-click="click(user)" ng-href="">
<div class="row">
<div class="col-xs-2">
<div class="thumb-userlist-sm pull-left mr">
<img class="img-circle" ng-src="{{ user.p }}" alt="...">
</div>
</div>
<div class="col-xs-8">
<div class="message-sender">{{ user.n }}</div>
<div class="message-preview">{{user.l}}</div>
</div>
<div class="col-xs-2">
<div class="pull-right">{{user.time}}</div>
</div>
</div>
</a>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="line-separator"></div>
</div>
</div>
</div>

Categories