I am looking to pass an item from a controller's $scope element (in this case the 'header' and 'content') to a page that is redirected-to upon a click.
The way it is currently set up is as follow:
- Page #1 loads the masterArray, displaying all elements
- User then clicks on a button which is linked with the 'href' attribute
- When user clicks an href button, the new page (Page #2) is displayed.
My Question: How can I pass the 'header' and 'content' onto Page #2 and ensure that only the associated header/content (based on the link that is clicked) are mapped and displayed?
The code below is for the main page with all the data dynamically being displayed
app.controller("SomeController", function ($scope, $window) {
$scope.masterArray = [{
title: "MainTitle",
segments: [{
title: "SubTitle",
articles: [{
header: "Article1Header",
content: "SomeContent",
href: "http://uniqueURL1.com"
}, {
header: "Article2Header",
content: "SomeContent",
href: "http://uniqueURL2.com"
}, {
header: "Article3Header",
content: "SomeContent",
href: "http://uniqueURL3.com"
}, {
header: "Article4Header",
content: "SomeContent",
href: "http://uniqueURL4.com"
}]
}
}]
}];
Page #1
<div ng-controller="SomeController">
<div class="section">
<div class="segment" ng-repeat="m in shownArray">
<div ng-repeat="s in m.segments" ng-if="m.segments">
<h4 ng-show="filtered.length">{{s.title}} ({{filtered.length}})</h4>
<div template="basic" ng-repeat="a in s.articles|articleFilter:query as filtered" is-open="a.isOpen">
<h2 ng-bind-html="a.header | highlight:query"></h2>
<div>
<p ng-bind-html="a.content | highlight:query"></p>
<a class="button button-primary" ng-href="{{a.href}}">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
Page #2 (Desired Result)
<div>
<h2>//DISPLAYS ASSOCIATED 'header'</h2>
<h3>//DISPLAYS ASSOCIATED 'content'</h3>
</div>
If you want to use URL Params, use $location.search:
$rootScope.header = $location.search().header;
You can also use $routeParams if you prefer to build your URL differently.
Both would require you to properly build ng-href:
ng-href="{{a.href+'?header='+a.header+'&content='+a.content}}"
If your architecture allows it, consider a single page app, in which you'd configure states with $stateProvider in your config() then use ui-sref to access them in your HTML.
Related
I am using angular material for checkbox.
in component.ts
dataList: any[] = [
{ name: 'EmployeeName', flag: true, 'label': 'Employee Name'},
{ name: 'EmployeeDepartment', flag: false, 'label': 'Employee Department'},
{ name: 'EmployeeExperience', flag: false, , 'label': 'Employee Experience'}
]; // will have 30+ element in array
html (this opens as modal)
<div *ngFor="let data of dataList">
<section>
<mat-checkbox [checked]="data.flag" (change)="onChange($event, data)">{{data.label}}</mat-checkbox>
</section>
</div>
<div>
<button (click)="onClose()">
Close
</button>
<button(click)="onApply()">Apply</button>
</div>
some of the checkbox will be pre-checked, if checked than behind modal there we will be filter dropdown for checked object.
problem is if I check the object(eg- Employee Department), than behind the modal that object(Employee Department) will be added instantly and the change in UI will be visible. what I want is add that filter object (user can select multiple object at a time) only after clicking apply button and changes in UI should be visible. if I click on close that nothing should be added.
html for behind modal page
//<ngx-select-dropdown> whole config is not listed
<div class="grid-container">
<ng-container *ngFor="let data of dataList">
<div class="grid-item" *ngIf="data.flag">
<div>
<p>{{data.name }}</p>
</div>
<ngx-select-dropdown [config]="config">
</ngx-select-dropdown>
</div>
</ng-container>
</div>
I tried keeping checkbox values in another object and set value only on click of apply but the problem persisted. what should I do in onChange($event, data) and onApply() so that I can achieve the behavior I want.
Thanks in Advance
You could simply save the checkbox values in another object and once the user hits the apply button then have your function for example
onApply() that will assign the new values from the checkbox to your data
Basically, I am trying to implement tabs on a main page. The tabs will consist of components on other pages for quick access. I am confused on how I can import a layout while sending data to it in a "lazy" way.
I now use the #section tag to bring in the layout, which is fine. But I only want to request the data it needs when the tab is clicked.
in my main.blade.php:
<li>
<a href="#tab_1" data-controller="tab_1" data-target="#tab_1" data-toggle="tab" aria-expanded="true">
tab 1 </a>
</li>
<div class="tab-pane" id="tab_1" >
#yield('tab_1')
</div>
in my tab1:
#extends('main')
#section('tab_1')
#foreach ($activities as $activity)
{{--implementation--}}
#endforeach
#endsection
in my TabController#showtab1:
public function showtab1(Request $request) {
//Logic here
return view('tab1', ['activities' => $activities]);
}
The optimal scenario is loading the content for each tab only when the tab is clicked by calling a controller function. I have gotten it to work by using routes to change the whole page, but it kind of ruins the advantage of tabs.
You would typically implement this in such a way that you use the same layout, then pass a different parameter through your URL -> controller -> blade include parameter -> blade view.
The example below demonstrates how you can do 'lazy'-load (load only 1 tab at the same time) across files in Laravel:
// /routes/web.php
Route::get('/tabbed-page', 'TabbedPageController#index');
Route::get('/tabbed-page/:tab', 'TabbedPageController#show');
// /App/Http/Controllers/TabbedPageController.php
public function show($request, $tab) {
$data = ['title'=> 'No tab'];
if ($tab === 'tab1') {
$data = ['title' => 'I am tab 1'];
}
return view('page', [
'tab' => $tab,
'data'=> $data
]);
}
public function index($request) {
// open tab1 by default
redirect('/tabbed-page/tab1');
}
{{-- /resources/views/page.php, requested at for example /tabbed-page/tab1 --}}
<nav>
Tab 1
Tab 2
Tab 3
Tab 4
</nav>
<main>
#include($tab, $data)
</main>
{{-- /resources/views/tab1.php, tab2.php, tab3.php, etc.. --}}
<div id="tab1">
<h1>{{ $data['title] }}</h1>
Content ....
</div>
I have an accordion object in AngularJS that is data driven. Here is what my html looks like:
HTML:
<div class="field-accordion" ng- if="field.fieldAccordion">
<ul class=a ccordion>
<li ng-repeat="fieldAccordion in field.fieldAccordion" ng- click="accordion.current = fieldAccordion.fieldName">
{{ fieldAccordion.fieldName }}
<ul ng-show="accordion.current == fieldAccordion.fieldName">
<li ng-repeat="fieldSub in fieldAccordion.fieldSub">
{{fieldSub.fieldName}}
</li>
</ul>
</li>
</ul>
</div>
Then in my JS file, I simply use it like this:
JS:
app.controller("myCtrl", function($scope) {
$scope.mySettings({
Header: '',
Title: '',
Img: '',
fieldAccordion: [{
// "this is my accordion list"
This works great for me. Whenever I click on the parent, it expands. The problem that I'm having is I can't get it to collapse. I am also trying to do it while keeping everything data driven like it is now. Is there anything I can change in my HTML to allow the text to collapse after expanding ?
Thank you
So the problem is because of a new scope being created, what you need to know is ng-if and ng-r creates a new scope, I checked your code and the ng-repeat is the root cause of the issue! hence the variable is not updating and the accordion is not toggling. Here is a simple way to update the parent controller using the $parent.
I have created a mockup highlighting the issue. So instead of updating accordion.current which will update the scope created by the ng-if you can just give it as $parent.accordion.current in the ng-click which will update the parent scope and the variable will be available for the ng-show and the accordion toggling works as expected.
Below is a working snippet, let me know if this fix solved your issue!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.field = {
Header: '',
Title: '',
Img: '',
fieldAccordion: [{
fieldName: "one",
fieldSub: [{
fieldName: "oneone"
}]
}, {
fieldName: "two",
fieldSub: [{
fieldName: "twotwo"
}]
}]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div class="field-accordion" ng-if="field.fieldAccordion">
<ul class="accordion">
<li ng-repeat="fieldAccordion in field.fieldAccordion" ng-click="$parent.accordion.current = fieldAccordion.fieldName">
{{ fieldAccordion.fieldName }}
<ul ng-show="accordion.current == fieldAccordion.fieldName">
<li ng-repeat="fieldSub in fieldAccordion.fieldSub">
{{fieldSub.fieldName}}
</li>
</ul>
</li>
</ul>
</div>
</div>
Im trying to implement pager.js in my knockout SPA.
It is working, sort of, however i am experiencing some strange behaviour, even though I have followed the official guide..
My page structure look like this.
<div data-bind="page: { id='start', title='index'}">
</div>
<div data-bind="page: { id='mainPage1', title='mainPage1'}">
</div>
//implement deep nav??
<div data-bind="page: { id='mainPage2', title='mainPage2'}">
//Grid page
<div data-bind="page: { id='start', title='grid'}">
//Error here - page dont exist? | URL output: mainPage2/detail
<a data-bind="page-href: '../detail' ">go to detail page.</a>
</div>
//Detail page
<div data-bind="page: { id='detail', title='detail'}">
</div>
</div>
Also when i type in the url I can navigate to mainPage2 by this url:
/mainPage1/dsjak/adsPae1/madaadsnPage1/mainPage2
Aslong as the last part of the url is valid it will navigate to that part of the page, is this intended?
Not sure if this can have anything to do with my Back end routing but it looks like this..
routes.MapRoute(
name: "Default",
url: "{*catchall}",
defaults: new { controller = "Home", action = "Index" }
);
I am also using require.js..
Your syntax is all wrong
e.g. id='start' change to id:'start'
it should be
<div data-bind="page: { id:'start', role: 'start', title:'index'}">start</div>
<div data-bind="page: { id:'mainPage1', title:'mainPage1'}">page 1</div>
<div data-bind="page: { id:'mainPage2', title:'mainPage2'}">
page2
<div data-bind="page: { id:'start', title:'grid'}">
//Error here - page dont exist? | URL output: mainPage2/detail
<a data-bind="page-href: '../detail' ">go to detail page.</a>
</div>
//Detail page
<div data-bind="page: { id:'detail', title='detail'}"></div>
</div>
I have a view template loaded through backbone into a jQuery mobile front end. I've got the jQuery styles to take effect, but it seems to ignore my data-theme attribute and use teh value 'c' regardless.
Here's the template...
<h2>Version Info</h2>
<div id="info">
<a id="addVersionInfoEntryButton" href="#/versioninfo">Add manual entry</a>
<div id="addVersionInfoEntryArea">
</div>
<ul id="items" data-role="listview" data-filter="true" data-theme="f">
{{#each items}}
<li>{{dbVersion}} | {{tag}}</li>
{{/each}}
</ul>
</div>
And I load it here...
listData: function () {
this.collection.sort();
this.$el.html(this.template({ items: this.collection.toJSON() }));
this.$itemsList = this.$('#items');
this.$addEntryArea = this.$('#addVersionInfoEntryArea');
this.$addEntryButton = this.$('#addVersionInfoEntryButton');
if (this.$itemsList.hasClass('ui-listview')) {
this.$itemsList.listview('refresh');
}
else {
this.$el.trigger('create');
}
},
(The refresh and create calls are necessary to get JQM to reprocess the dynamically loaded content). All is fine except for the swatch applied.
Can anyone offer any suggestions?
UPDATE:
The data theme applied seems to be applying to the list items but NOT to the data filter, which defaults to 'c'