i recently learning about Laravel using vue...
I'm using Laravel 5.8,
Bulma 0.7.5,
Buefy 0.8.1, and
Vue
My issue is that when I'm logged-out the Buefy CSS works fines but ones I log-in, it stops working...
Here's are a few screenshots so you can see what I'm talking about...
Here's what it looks like when I'm logged-out
https://imgur.com/inOTzgv
and here's what it looks like when I'm log-in
https://imgur.com/Qgq52d4
Here's my app.js
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
var app = new Vue({
el: '#app',
data() {
return {
auto_password: true,
password_options: 'keep'
}
}
});
and here's
My cpanel.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'EthicallySpeaking') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">-->
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
#yield('styles')
</head>
<body>
<div id="app">
#include('inc.navbar')
#include('inc.messages')
#include('inc.side_navbar_cpanel')
<div id="app" class="cpanel-dashboard-area flex-container">
#yield('content')
</div>
</div>
#yield('scripts')
</body>
</html>
and here's the edit.php form that I'm having the issue with...
#extends('layouts.cpanel')
#section('content')
<section class="section">
<div class="container">
<div class="columns m-l-10">
<div class="column is-10">
<h1 class="title">Edit User Profile</h1>
</div><!-- end column is-10 -->
</div><!-- end columns -->
<hr/>
<div class="columns">
<div class="column">
<form action="{{route('users.update', $user->id)}}" method="POST">
{{method_field ('PUT')}}
{{csrf_field()}}
<div class="field">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" id="name" value="{{$user->name}}">
</p>
</div>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="text" class="input" name="email" id="email" value="{{$user->email}}">
</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="field">
<b-radio v-model="password_options" native-value="keep" name="permission_type">Do Not Change Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="auto" name="permission_type">Auto-Generate New Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="manual" name="permission_type">Manually Set New Password</b-radio>
<p class="control">
<input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user">
</p>
</div>
</div>
<button class="button is-success m-t-20">Edit User</button>
</form>
</div><!-- end column is-10 -->
</div><!-- end columns -->
</div><!-- end container -->
</section>
#endsection
I wanted to know if anyone know why this is happing?
Related
I work on Laravel + Vuejs. Something has just happened, since then my script as copied hereunder doesn't work, chrome doesn't detect any vuejs script.
Astonishingly, the same script works well if I copy it into backup directory & run PHP artisan instance from there. Need advise. Actually problem seems with routerview which could not activate due to unknown problem. did i wrongly uninstall something which need to reinstall again ? because seems router doesn't work
kash.blade.php: - Main script
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')}}">
<link href="{{asset('backend/vendor/fontawesome-free/css/all.min.css')}}"
rel="stylesheet" type="text/css">
<link href="{{asset('backend/vendor/bootstrap/css/bootstrap.min.css')}}"
rel="stylesheet" type="text/css">
</head>
<body id="page-top">
<div id="app">
<div id="wrapper">
<div class="container-fluid" id="container-wrapper">
<router-view></router-view>
</div>
</div>
</div>
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('backend/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('backend/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('backend/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
</body>
</html>
route.js: - where I describe the component route as to where login.vue lies
let login = require('./components/auth/login.vue').default;
export const routes = [
{ path: '/', component: login, name:'/' },
]
Login.vue: - Just a simple vue script with two text boxes.
<template>
<div>
<div class="container-login">
<h1 class="h4 text-gray-900 mb-4">Login</h1>
</div>
<form class="user" #submit.prevent="login">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail"
placeholder="Enter Email Address" v-model="form.email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword"
placeholder="Password" v-model="form.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<hr>
</form>
<hr>
<div class="text-center">
</div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
form:{
email: null,
password: null
}
}
},
methods:{
}
}
</script>
I am new to Vue.js. I am trying to make a form dynamic (only a certain part of the form dynamic.). A user can have multiple guarantors. So I made the Guarantor form Dynamic with VueJS. When I submit the form and return the request, I see only the last array. Its always the last array, all others are lost.
This is the blade file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ asset('css/app.css')}}">
<title>Laravel</title>
</head>
<body>
<div id="app">
<div class="container pt-5">
<form action="{{ route('submit.store')}}" method="post">
#csrf
<div class="card-body">
<h4 class="card-title">User Detail</h4>
<input type="text" class="form-control mb-1" name="user_name" id="user_name" placeholder="Name" />
<input type="email" class="form-control mb-1" name="user_email" id="user_email"
placeholder="Email" />
<textarea name="about" class="form-control" id="about" cols="30" rows="10"
placeholder="About"></textarea>
</div>
<dynamic-form></dynamic-form>
</form>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
And this is how the VueComponent looks.
<template>
<div>
<button class="btn btn-success mb-3" #click.prevent="addNewUser">Add User</button>
<div class="card mb-3" v-for="(user, index) in users" :key="index">
<div class="card-body">
<span class="float-right" style="cursor:pointer" #click.prevent="removeForm(index)" >X</span>
<h4 class="card-title">Guarantor No: {{ index }}</h4>
<input type="text" class="form-control mb-1" name="name" id="name" placeholder="Name" v-model="user.name" />
<input type="email" class="form-control mb-1" name="email" id="email" placeholder="Email" v-model="user.email"/>
<textarea name="about" class="form-control" id="about" cols="30" rows="10" placeholder="About" v-model="user.about"></textarea>
</div>
</div>
<input type="submit" class="btn btn-primary" value="submit">
</div>
</template>
<script>
export default {
name: 'dynamic-form',
data() {
return{
users: [
{
name: '',
email: '',
about: ''
}
]
}
},
methods: {
addNewUser: function() {
this.users.push({
name: '',
email: '',
about: ''
});
},
removeForm: function(index) {
this.users.splice(index, 1);
}
}
}
</script>
How can I tackle this problem?
In PHP, values with the same name attribute value will get overwritten. (See the "How do I get all the results from a select multiple HTML tag?" section here).
You can create arrays of values by adding a bracket to the name. For example, if you made the name of the "name" input name[], name will be an array of names in PHP.
In your case, you could use this format: name="guarantors[][name]". That way you will get an array in PHP under the key guarantors (e.g. $request->guarantors) and each of the values in guarantors will be an array with the values name, email, etc.
I am using Laravel 6 and my login doesn't work.
I started with php artisan make:auth and tested the login. It worked. Then I made a custom login page. My problem is that my custom login page doesn't work. When I click login it just reloads the page without doing anything. Can I debug it somehow? Here is my code of login.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'CMS Buddy') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://kit.fontawesome.com/fd2bd3b3b6.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('img/background_login.jpg');">
<div class="wrap-login100 p-t-190 p-b-30">
<form class="login100-form validate-form" method="POST" action="{{ route('login') }}">
#csrf
<div class="login100-form-avatar">
<img src="img/logo.png" alt="Logo">
</div>
<span class="login100-form-title p-t-20 p-b-45">
CMS Buddy
</span>
<div class="wrap-input100 validate-input m-b-10 {{ $errors->has('email') ? ' is-invalid': '' }}"
data-validate="E-Mail address is required">
<input class="input100" type="text" name="email" placeholder="{{ __('E-Mail Address') }}">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
#if ($errors->has('email'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div class="wrap-input100 validate-input m-b-10" data-validate="Password is required">
<input class="input100" type="password" name="{{ __('Password') }}"
placeholder="{{ __('Password') }}">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
#if ($errors->has('password'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="container-login100-form-btn p-t-10">
<button type="submit" class="login100-form-btn">
{{ __('Login') }}
</button>
</div>
<div class="text-center w-full p-t-25 p-b-230">
#if (Route::has('password.request'))
<a class="txt1" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</form>
</div>
</div>
</div>
<script src="{{ asset('js/login/select2.min.js') }}"></script>
<script src="{{ asset('js/login/main.js') }}"></script>
</body>
</html>
I think your password cause these. The validation will return probably "The password field is required".
Mispelled capital "P" for password name attribute.
Change these:
<input class="input100" type="password" name="{{ __('Password') }}" placeholder="{{ __('Password') }}">
To these:
<input class="input100" type="password" name="{{ __('password') }}" placeholder="{{ __('Password') }}">
The page doesn't reload, it's redirecting back for failed validation....
Why?
Because you're missing the password field in your form
Change
name="{{ __('Password') }}"
to
name="password"
The __() function is useful to localize or translate text for your users, however the name attribute is not rendered* in the browser so it doesn't need to be localized..
Laravel expects the form to post email and password
Hey can someone please help this is driving me nuts. I need to make a url from the 3 filters 'ecvnd', 'ecdiv', and 'ecclas' and I have values for all 3 plus the base url. I'm stuck and I think this wouldn't be that difficult if my colleague didn't leave me guessing. This is for ecom site so I need the filters to display the proper products in the link.
the values are as such: ECVND=59375, ECDIV=53 and ECCLAS=59
the closest I got was, but not returning the right products.
https://shop.michells.com/orders/catalog/filter_ECVND=59375&filter_ECDIV=53&ECCLAS=59
As you can see from the snippet below, the filters are hidden in the url on click but when you arrive I need the proper filters to display as there are thousands of other products in the system.
ss snippet hint
<!DOCTYPE html>
<!-- saved from url=(0050)http://getbootstrap.com/examples/starter-template/ -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Henry F. Michell's</title>
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/css/michells.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="/js/respond.js"></script>
<script src="/js/html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<link href="/css/michells.ie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]>
<link href="/css/michells.notie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!-- Bootstrap core CSS -->
<link href="//fonts.googleapis.com/css?family=Bree+Serif" media="screen" rel="stylesheet" type="text/css">
<link href="/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/grid.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/select2.css" media="(min-width: 768px)" rel="stylesheet" type="text/css">
<link href="/css/select2-bootstrap.css" media="(min-width: 768px)" rel="stylesheet" type="text/css">
<link href="/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
</head>
<body>
<div class="subpage hidden-print">
<img src="/img/bg-subpage-banner.jpg">
</div>
<div class="container-fluid">
<!-- HEADER -->
<div class="header">
<!-- green bar across the top -->
<div class="row hidden-print">
<div class="col-xs-12 col-lg-11 lg-right navigationBar">
<!-- contents of the green nav bar -->
<!-- expanded links -->
<ul class="hidden-xs hidden-sm">
<li>Michells.com|</li>
<li>Contact Us|</li>
<li class="hoverMenu">My Account
<ul class="dropdown-menu myaccountMenu left" role="menu">
<li>Change Password</li>
<li>Order History</li>
<li>Customer Statements</li>
<li>Plant Report</li>
</ul>
|</li>
<li>Saved Carts|</li>
<li>Account 1 <a class="small" href="/orders/login/logout">Logout</a></li>
</ul>
<!-- mobile menu -->
<div class="hidden-md hidden-lg right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>Michells.com</li>
<li>Contact Us</li>
<li>Change Password</li>
<li>Order History</li>
<li>Customer Statements</li>
<li>Saved Carts</li>
<li>Plant Report</li>
</ul>
</div>
</div>
<!--/mobile menu -->
<!-- /nav bar contents -->
</div>
</div><!-- /green nav bar -->
<img class="logo" src="/img/michells-logo.png">
<div class="mobilelogoutIcon visible-xs hidden-print"><a class="small" href="/orders/login/logout"><i class='fa fa-sign-out'></i></div>
<div class="tabletWelcome hidden-xs hidden-print">
<div>1 <a class="small" href="/orders/login/logout">Logout</a></div>
</div>
<div class="minicart hidden-print">
<a href="/orders/cart/reviewcart">
<i class="fa fa-shopping-cart"></i>
<span class="shoppingCartQty">0</span>
<span class="items"> Items</span>
</a>
</div>
</div>
<!-- / HEADER -->
<!-- Vendors -->
<div class="contents vendorselect">
<h1><span class="hidden-xs"> Online Ordering: </span>Vendors</h1>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 loginform">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<form id="run" action="/orders/catalog/filter" method="post">
<p>Please select a vendor to view their products</p>
<select name="filter_ECVND" id="filter_ECVND" class="form-control">
<option>Select Vendor</option>
<option value='940' >Agri Starts (940)</option><option value='1004' >Aldershot (1004)</option><option value='72761' >Aris (72761)</option><option value='26600' >Aris Horticulture Inc (26600)</option><option value='3650' >Athena Brazil (3650)</option><option value='6795' >Blue Heron (6795)</option><option value='9735' >Botany (9735)</option><option value='07600' >Bountiful Farm (07600)</option><option value='9225' >Burchell Nursery (9225)</option><option value='10500' >Cal Seedling (10500)</option><option value='11740' >Casa Flora (11740)</option><option value='921' >Cohen Nurseries (921)</option><option value='14085' >Colony (14085)</option><option value='13688' >CLI (13688)</option><option value='18997' >Dummen (18997)</option><option value='18997' >Dummen Group (18997)</option><option value='18997' >Dummen USA (18997)</option><option value='22470' >Dummen/Fides (22470)</option><option value='19300' >Duwaynes (19300)</option><option value='47200' >Ecke (47200)</option><option value='47200' >Ecke Geraniums, LLC (47200)</option><option value='20100' >Eckert's Greenhouse (20100)</option><option value='20415' >Ekstrom (20415)</option><option value='20710' >Emerald Coast Growers (20710)</option><option value='21320' >Euro American (21320)</option><option value='14085' >F Henny (14085)</option><option value='21901' >Fairy Gardening (21901)</option><option value='22844' >Floral Plant Growers (22844)</option><option value='23720' >Four Star (23720)</option><option value='22702' >Geraniums (22702)</option><option value='26572' >Green Fuse (26572)</option><option value='26473' >Greenheart (26473)</option><option value='26760' >Gro 'N Sell (26760)</option><option value='26750' >Gro Link (26750)</option><option value='26920' >Gulley (26920)</option><option value='26920' >Gulley Greenhouse (26920)</option><option value='35290' >Knox Nursery (35290)</option><option value='35499' >Koba (35499)</option><option value='35500' >Kogut (35500)</option><option value='35700' >Kube Pak (35700)</option><option value='36091' >Lancaster Farms (36091)</option><option value='38030' >Lucas Greenhouses (38030)</option><option value='28480' >Marjama (28480)</option><option value='39345' >Mast Young Plants (39345)</option><option value='40185' >Meadowview (40185)</option><option value='43322' >Morris (43322)</option><option value='43370' >Mountain Creek (43370)</option><option value='46928' >Obersinner (46928)</option><option value='49150' >Pell Greenhouse (49150)</option><option value='51480' >Plainview Growers (51480)</option><option value='51480' >Plainview Growers Inc (51480)</option><option value='51500' >Pleasant View (51500)</option><option value='51555' >Plug Connection (51555)</option><option value='53625' >Reardon (53625)</option><option value='56105' >Russell (56105)</option><option value='57600' >Scott Farms (57600)</option><option value='59375' selected>Silverleaf Greenhouses (59375)</option><option value='59680' >Skagit Gardens (59680)</option><option value='61100' >Spada Nursery (61100)</option><option value='61166' >Speedling Blairsville (61166)</option><option value='61160' >Speedling Inc (61160)</option><option value='61160' >Speedling Inc. (61160)</option><option value='62850' >Sun Gro (62850)</option><option value='32690' >Sunfire (32690)</option><option value='63290' >Swift Greenhouse (63290)</option><option value='22701' >Syngenta (22701)</option><option value='22701' >Syngenta Flowers (22701)</option><option value='22700' >Syngenta Flowers, Inc (22700)</option><option value='51555' >The Plug Connection (51555)</option><option value='66546' >Twin Srpings (66546)</option><option value='68065' >Van Essen (68065)</option><option value='69605' >Wagner Greenhouses Inc (69605)</option><option value='69899' >Walters Gardens (69899)</option><option value='70250' >Welby (70250)</option><option value='72050' >Woodburn Nursery (72050)</option><option value='72055' >Woodburn Nursery (72055)</option> </select>
<div class="btncontainer right">
<button type="submit" class="btn btn-default right">Select</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- / Vendors -->
</div><!-- /.container -->
<div class="footerouter hidden-print">
<div class="footerinner">
<footer class="row">
<div class="col-xs-12 col-lg-4 row center">
<div class="col-xs-12 col-lg-10 col-lg-offset-1 row">
<img src="/img/michells-logo.png" class="footerlogo">
<p class="stayconnected"><em>Stay Connected</em></p>
<div class="col-xs-3"><img src="/img/icon-fb.png"></div>
<div class="col-xs-3"><img src="/img/icon-tw.png"></div>
<div class="col-xs-3"><img src="/img/icon-in.png"></div>
<div class="col-xs-3"><img src="/img/icon-gp.png"></div>
</div>
</div>
<div class="col-xs-12 col-lg-8">
<div class="col-xs-7 col-md-3">
<ul>
<li><strong>Main</strong></li>
<li>Home</li>
<li>About Us</li>
<li>Sales & Service</li>
<li>Michell's Product Catalog</li>
<li>Availability</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-xs-5 col-md-3">
<ul>
<li><strong>Products</strong></li>
<li>Seeds</li>
<li>Nursery</li>
<li>Plugs </li>
</ul>
</div>
<div class="col-xs-7 col-md-3">
<ul>
<li><strong>Exclusive Partners</strong></li>
<li>Green Fuse</li>
<li>CLI</li>
<li>Fairy Flowers</li>
</ul>
</div>
<div class="col-xs-5 col-md-3">
<ul>
<li><strong>Online Ordering</strong></li>
<li>Shop Now</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
<div class="col-xs-12 footerDisc">Pricing subject to change depending upon volume</div>
</footer>
<div class="pagebottom">
<span class="getupdates"><em>Get Updates!</em></span>
<a target="_blank" class="signup" href="http://visitor.r20.constantcontact.com/d.jsp?llr=gpmby6oab&p=oi&m=1115542303206&sit=6diisxiib&f=2dbee31f-253a-4d91-a0f8-4a2206e36974">Sign Up for Email Updates</a><span class="small">Michell's <span class="Labels">2017</span>. All rights Reserved. <span class="bar">|</span> Sitemap<span class="bar">|</span>Terms & Conditions<span class="bar">|</span>Privacy Policy</span>
</div>
</div>
</div>
<div class="device-xs visible-xs hidden-print"></div>
<div class="device-sm visible-sm hidden-print"></div>
<div class="device-md visible-md hidden-print"></div>
<div class="device-lg visible-lg hidden-print"></div>
<div class="device-landscape visible-landscape hidden-print"></div>
<div class="device-portrait visible-portrait hidden-print"></div>
<!-- Bootstrap core JavaScript
================================================== -->
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>
<script type="text/javascript" src="/js/hfm.js"></script>
<script type="text/javascript" src="/js/hfm.vendors.js"></script>
<script type="text/javascript">
//<!--
hfm.vendors.init();
//-->
</script>
<script type="text/javascript">
jQuery('.hoverMenu').hover(
function() {
jQuery(this).addClass('open');
}, function() {
jQuery(this).removeClass('open');
}
);
</script>
</body>
</html>
Thank you so much in advance.
I am trying to display an individual item from the list generating in ng-repeat by clicking on selected item and rendering in a different div. These are the files.
http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="../dist/semantic.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</head>
<body id="homebased" ng-controller="MyController">
<div class="ui two divided column padded grid">
<div class="six wide column">
<h2>Six Wide Column</h2>
<form action="ui form">
<div class="two fields">
<div class="field">
<div class="ui action left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Start typing..." ng-model="q">
<div class="ui teal button">
<i class="large arrow right icon"></i></div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<label>Filter by..</label>
<div class="ui selection dropdown small">
<input type="hidden" name="name">
<div class="default text">filter</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="name">Author</div>
<div class="item" data-value="year">Year</div>
</div>
</div>
<div name="stp">{{records.indexOf(item)}}</div>
</div>
</form>
</div>
</div>
<div class="ten wide column">
<h2>Search Results</h2>
<div class="ui segment right">
<a class="ui teal left ribbon label">N= {{records.length}}</a>
<div class="ui selection list">
<div class="item" ng-repeat="item in records | filter: q">
<a href="#stp {{records.indexOf(item)}}"><div class="content" >
<div class="header">{{item.name}}</div>
<div class="description">Correspondence begun in: {{item.start}}</div>
</div></a>
</div>
</div>
</div> <!--list-->
</div>
</div>
</body>
</html>
APP.JS
var myApp = angular.module('myApp', ['firebase']);
myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = new Firebase('https://simpleform.firebaseio.com/records');
$scope.records = $firebaseArray(ref);
$scope.recordOrder = 'name';
}]);
I would advise you to dig around ui-router: https://github.com/angular-ui/ui-router
You define views, you define routing then your items access to the other view by using ui-sref="myitem({id: item.id})" and you're all set up!