I am use angularjs to do a crud project,
what I want the result is when I click a menu on the left
then open a new tab and load the page content on the right but not replace the content ,follow the picture ,is anyone know how to do it?
you can refer to AngularStrap Tabs http://mgcrea.github.io/angular-strap/#/tabs
In my project i used the AngularStrap Tabs, this is a plunker:http://plnkr.co/edit/hSg15IMOPOdGPkD6Fzfg?p=preview
html:
<!-- bsActivePane is optional -->
<div bs-active-pane="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
</div>
</div>
js:
$scope.tabs = [
{
"title": "Home",
"content": "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica."
},
{
"title": "Profile",
"content": "Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee."
},
{
"title": "About",
"content": "Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.",
"disabled": true
}
];
$scope.tabs.activeTab = "Home";
Related
I am new in React, Now I am trying to do sidebar and hide show collapse menu item.
here is function=>
collapsemetoggle(){
this.setState(state => ({ collapsemeopen: !state.collapsemeopen }));
}
<div className="list-group list-group-flush">
Dashboard
<a onClick={this.collapsemetoggle} data-toggle="collapse" className="list-group-item list-group-item-action bg-light">Collapase Me</a>
<Collapse isOpen={this.state.collapsemeopen}>
<div className="list-group list-group-flush">
Dashboard
</div>
</Collapse>
</div>
</div>
But why
'Collapse' is not defined react/jsx-no-undef
is shown? I just reference from here=>
React Transition
I am trying to achieve to get sidebar like =>
Sidebar
Other people use ul li for menu list and I am trying to do with collapse. Is it the correct way? If not, Plase let me know for some example.
import Collapse:
import {Collapse} from 'react-bootstrap'
use props in instead of isOpen
<Collapse in={this.state.open}>
<div id="example-collapse-text">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</div>
</Collapse>
When using Bootstrap or any other UI framework, you need to import the component you're using. Put this on top of your file and it will automatically import it.
import Collapse from 'react-bootstrap/Collapse'
By the way, the isOpen prop is not a Collapse prop. You should use in
<Collapse in={this.state.collapsemeopen}>
This is probably an easy answer, but I am having difficulty wrapping my brain around it. I am building an Angular dashboard and once logged in, users can browser to /dashboard; I also have nested states for browsing around the dashboard. Below is how my states are setup (shortened for brevity)
app.js
.state('dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard.html'
})
.state('dashboard.new', {
url: '/new',
templateUrl: 'views/dashboard.new.html'
});
dashboard.html
<div page-header></div>
<div dashboard-menu></div>
<section>
<div class="container mt48">
<div class="row">
<div class="col-sm-12 text-center">
<h4 class="uppercase mb16">This is the dashboard default page</h4>
<p class="lead mb64">
FSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
</div>
</div>
</div>
</section>
<div ui-view></div>
Although not pertaining to this question, I've created two directives for the page-header and dashboard-menu (just in case you wondered what that was)
browser view: (Edited to add another screenshot of entire header)
What I would like to know how to do is when an active state is activated - in this example, dashboard/new that the default content on the /dashboard page will not be shown.
Thank you for taking a look - please ask me anything as I know what I was trying to ask and am hopeful I did without being confusing. Thank you.
The quickest way I think would be to hide the default text with ng-show. State can be determined by the $state object. Alternatively, perhaps it can be injected through the resolve function of the route itself.
I need to create 4 tabs in my app and after comparing Angular UI and Angular Strap, i decided to go with Angular Strap. I have lost hope in Angular Strap and this is my last try before i throw it out of my app.
I don't really get how a simple thing like making Tabs Justified is so difficult or am i missing something very basic?
Where and how should i include a class to make Tabs justified? Thanks
Markup:
<div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2" ng-controller="TabsAndTablesCtrl">
<div ng-model="tabs.activeTab" tabs.navClass bs-tabs>
<div ng-repeat="tab in tabs" title="{{ tab.title }}" ng-bind="tab.content" bs-pane></div>
</div>
</div>
Controller:
var app = angular.module('tabsAndTablesModule', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
app.controller('TabsAndTablesCtrl', function($scope) {
$scope.tabs = [
{title:'Projects', content: 'Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.'},
{title:'Tasks', content: 'Food truck fixie locavore, accusamus mcsweeney\'s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.'},
{title:'Documents', content: 'Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro fanny pack lo-fi farm-to-table readymade.'},
{title:'Users', content: 'Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro fanny pack lo-fi farm-to-table readymade.'}
];
$scope.tabs.activeTab = 1;
});
This is how you can add a class
<div ng-model="tabs.activeTab" nav-class='nav-justified nav-pills'..
See Demo
And its also documented
Trying to understand filers in AngularJS. I have the following code seeding articles from JSON to the home page.
<div ng-repeat='article in articlesList | filter:filters'>
<span>{{article.category}}</span>
<h1>{{article.title}}</h1>
<p>{{article.short_desc}}</p>
</div>
I also have navigation, which I want to act as a filter, so instead of going to a new page, it will just filter article out from home page by category.
<ul>
<li>
<a ng-click="filters.category = 'home'">Home</a>
</li>
<li>
<a ng-click="filters.category = 'activity'">Home</a>
</li>
</ul>
My JSON looks like this
{
"article1": {
"id":"1",
"category": "home",
"title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
"short_desc": "Nemo enim ipsam voluptatem quia voluptas sit",
"images": [
"img/article-img1.jpg"
]
},
"article2": {
"id":"2",
"category": "activity",
"title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
"short_desc": "Nemo enim ipsam voluptatem quia voluptas sit",
"images": [
"img/article-img2.jpg"
]
},
}
I am fetching data from it with this controller
app.controller('HomeCtrl', function($scope, $http) {
$http.get('pages/articles.json')
.success(function(data) {
$scope.filters = {}
$scope.articlesList = data;
})
.error(function(data) {
alert('Something is wrong with JSON')
})
});
I am trying to figure out the right way to set up the Filter. Looking for a solution or some article dealing with similar problem.
Or maybe filtering is not the best option for this task. I appreciate any suggestions/best practices.
I kept making edits to my comment, so I figured I would just make an answer to the question.
In order to use your filter, you're going to need to do something like this:
<div ng-repeat='article in articlesList | filter:categoryFilter'>
<span>{{article.category}}</span>
<h1>{{article.title}}</h1>
<p>{{article.short_desc}}</p>
</div>
And then, in your navigation bar (assuming they have the same scope, if not then the answer would be mildly different), you would do something akin to this:
<ul>
<li>
Home
</li>
<li>
Press
</li>
</ul>
I don't have any data to test this out thoroughly. If it doesn't work, please provide a few (~5) objects in the JSON array so that I can test it out on a plunkr. Also the HTML in your body tag would help greatly.
Here is the API documentation for filters, with a few examples that may help you understand filters a little more.
EDIT
Since you updated your information, I got This Plunkr working.
I'll break each part down:
HTML
<!DOCTYPE html>
<html ng-app="home">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="dataCtrl">
<nav>
<a ng-click="categoryFilter.category='Home'">Home</a>
<a ng-click="categoryFilter.category='Activity'">Activity</a>
<a ng-click="resetCategoryFilter()">Reset</a>
<span style="float:right;"><input type="text" ng-model="categoryFilter.title"></span>
</nav>
Your Current Filters Applied Are: {{categoryFilter}}
<div ng-repeat="item in data | filter:categoryFilter">
{{item.title}}
</div>
</body>
</html>
Now for the HTML, you'll see that I have just 1 controller being set. This makes it so that all of these items are in the same parent. If you have a wrapper DIV, I suggest putting the ng-controller on that div.
You'll notice that I didn't put the elements in an <ul> or <li> tags. That's because I forgot. It should still work inside them.
That being said, You'll notice my code uses the $scope variable throughout. You seem to have a basic working knowledge of the $scope variable, so I'll leave it mostly alone. The one thing is the function I added to the scope, the resetCategoryFilters() function. It's a simple enough function: it takes all of the keys and sets their values to undefined so that the filters object is reset to base. I initialized the categoryFilters in the scope because... well I'm not sure, it just bothers me if I don't.
Javascript
// Code goes here
var app = angular.module('home', []);
app.controller('dataCtrl',function($scope){
$scope.categoryFilter = {
category:undefined,
title:undefined,
short_desc:undefined
};
$scope.resetCategoryFilter = function(){
for(var x in $scope.categoryFilter){
$scope.categoryFilter[x]=undefined;
}
}
$scope.data = [
{
"id":"1",
"category": "Home",
"title": "20 Useful Things around your House",
"short_desc": "Nemo enim ipsam voluptatem quia voluptas sit",
"images": [
"img/article-img1.jpg"
]
},
{
"id":"2",
"category": "Activity",
"title": "Carpe the Diem",
"short_desc": "Nemo enim ipsam voluptatem quia voluptas sit",
"images": [
"img/article-img2.jpg"
]
}
];//Here, instead of hard-coding the data like I did, use the $http service to get the values
});
You'll notice where I simply hard-coded the data. Since I was using Plunkr, I could have set that data off in a different page, but it was just easier to have it there. Use the $http service and the .get method to populate the $scope.data array.
Remarks About Your Javascript
I noticed that the indexes in the JSON you were giving were hard coded. I deleted them, making the data object an Array of objects, as opposed to an object of objects. Easy to loop through an array, difficult to loop through an object.
Hopefully this answers your question.
How would i go about using Bootstrap's Scrollspy when I am using Backbone.js hash based routing?
Backbone router example, which creates page www.example.com/#somePage/123
var AppRouter = Backbone.Router.extend({
routes: {
"": "home",
"somePage/:id": "somePage"
},
somePage: function (id) {
console.log("do something");
}
});
$(document).ready(function(){
window.app = new AppRouter();
Backbone.history.start();
});
Twitter scrollSpy example which should append #anchor-value to the end the URL:
<div id="navbar" class="row-fluid">
<ul class="nav nav-pills navbar">
<li class="active">
1
</li>
<li>
2
</li>
</ul>
</div>
<div data-spy="scroll" data-target=".navbar">
<h4 id="step1">Step 1</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="step2">Step 2</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
</div>
This wants to turn the URL to something like www.example.com/#somePage/123#step1, which is not working.
Here is a possible solution using the Bootstrap demo Scrollspy: https://jsfiddle.net/8wvdpddq/
Assuming you wish to have the URL updated and a history point added as the user scrolls, the following code should achieve it:
$('body').on('activate.bs.scrollspy', function () {
var active = $('nav li:not(.dropdown).active a').attr('href').slice(1);
window.app.navigate(active, {trigger: true});
console.log('update url/history to ' + active);
})
In this case, trigger is also set, meaning your routing handlers will fire, if you don't want this, just remove this option.