I have a Spring MVC controller and bootstrap page.
When I submit the form and send some payload to this endpoint if some condition is not met I would like to display confirmation window:
API:
#PostMapping(value = "/pairs")
public String addPair(#ModelAttribute StepForm addPairStepForm,
Model model) {
....... // do some check
}
Bootstrap page:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<main>
<!-- Modal -->
<div class="modal fade" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="validationModalLabel">Confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Pair already exists for the same exchange.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-md-10">
<form id="add_pair_form" class="form-inline" action="#" th:action="#{/pairs}"
th:object="${stepForm}"
autocomplete="off"
method="post">
<div class="row g-3 align-items-center mb-1 mt-1">
<div class="col-auto">
<label for="pair" class="form-label">New</label>
</div>
<div class="col-auto">
<input id="pair" class="form-control" name="pair" type="text"
placeholder="Pair to be added."
th:field="*{pair}"
required
autofocus>
......................................
</div>
</div>
<div class="form-group mb-1 mt-1">
<button type="submit" class="btn btn-primary submit_btn">Submit</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#validationModal">
Validate
</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</main>
</body>
</html>
How I can open the modal dialog window when I submit the form and Post some payload to Spring BE?
Related
I am developing an app which requires to show the data at every click on my different list of icon. The problem is how to display data in to bootstrap modal according to id. Thanks in advance.
Here, I have tried with, but not working all..
<div class="col-xs-12 col-sm-6 col-md-3">
#foreach($Play as $post)
<div class="member">
<div class="member-img">
#if ($post->new_game)
<img src="{{ $post->new_game}}" alt="member" />#endif
</div>
<!-- .member-img end -->
<div class="member-info">
<h5>{{$post->friendly}}</h5>
<h6>{{$post->enemy}}</h6>
<div class="divider--line divider--center"></div>
<p>{{ $post->weapon }}</p>
<button type="button" class="btn btn--primary btn--link" href="#" data-toggle="modal" data-target="#myModal" id="{{$post->id }}" onclick="showDtails">Get more weapon detials</button>
</div>
</div>
#endforeach
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
</div>
<div class="modal-body">
<img src="/app/assets/images/team/thumb/1.jpg">
<p>{{$post->full_weapon}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
Html should like this
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Button
<button type="button" data-toggle="modal" data-target="#myModal" onclick="showDtails({{$post->id }})">Get more weapon detials</button>
call function with ajax
function showDtails(postid){
$.ajax({
url : '{{ route("getdata") }}',
type: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
data:{postid:postid},
success:function(data){
$('.modal-body').html(data)
},
});
}
Route.php
Route::post('/getdata', 'HomeController#getdata')->name('getdata');
Controller.php
public function getdata(Request $request){
$postid = $request->postid;
$post = Post::where('id',$postid)->first();
return view('getdata',compact('post'));
}
getdata.blade.php file
<div>
//whatever you write here or display here you'll get this data to your bootstrap model.
</div>
You will need to hit a get api containing the data you need, when the response is received fill the values with javascript and then display the modal
Just write the function in th script tag
function showDtails(){
$( ".modal-body" ).load("/admin/edit_location", function() {
$( "#myModal" ).modal('show');
});
}
where /admin/edit_location is the route to load view and below is the function of the route:
public function GetEditLocationsModal(){
return view('modals.admin_edit_current_location');
}
use javascript or js framework like vuejs or library like jquery
axios|ajax call to controller->controller send back corresponding data ->show in modal
//show modal
$('#myModal').modal('show');
//hide modal
$('#myModal').modal('hide')
sorry my english is not good but i help as i can.
update
look at this example you will get the idea
welcome.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<title>Document</title>
</head>
<body>
<ul class="list-group">
<li ><button type="button" id="btn1" class="btn btn-primary m-3" onclick="get('btn1')">button 1</button></li>
<li ><button type="button" id="btn2" class="btn btn-primary m-3" onclick="get('btn2')">button 2</button></li>
<li ><button type="button" id="btn3" class="btn btn-primary m-3" onclick="get('btn3')">button 3</button></li>
</ul>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="modalBody">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function get(btn) {
// send data and recive response from controller
axios.post('/getData',{ // send
btnClick:btn
}).then(res =>{ // recive
$('.modal').modal('show'); // open modal
$('#modalBody').empty().append(res.data); // append data in modal body
});
}
</script>
web.php
Route::post('/getData', 'apiController#index');
controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class apiController extends Controller
{
public function index(Request $request)
{
switch( $request->btnClick){
case 'btn1':
return 'data for button 1';
break;
case 'btn2':
return 'data for button 2';
break;
case 'btn3':
return 'data for button 3';
break;
}
}
}
maybe you want send response from controller according to current user id. then use auth()->user()->id
I have a problem with a modal. My login is through a modal and it is in a navbar in a thymeleaf layout template as a component for all the pages, except the login. It works ok but if the login is wrong, it returns you to a full size page not to the modal , why is't that?
EDIT 1 int the back i use SpringBoot, Spring Security and UserDetailsService
https://e-commerce-springboot.herokuapp.com/
this is layout.hmtl
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Buy-A-Thing</title>
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport" />
<link rel="stylesheet" type="text/css"
th:href="#{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1 /js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<head>
<style>
#import url(https://fonts.googleapis.com/css?family=Lobster);
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
height: 20px;
text-align: center;
}
.glyphicon {
font-size: 17px;
}
h6 {
margin: 5px;
}
#homeButton{
font-family:Lobster;
font-size:20px;
}
#userNameDisplay {
color: rgba(250, 250, 250, 0.4);
margin: 15px;
}
</style>
</head>
<body>
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand active" id="homeButton" th:href="#{/}">Buy-A-Thing</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<!-- <li id="userNameDisplay" sec:authorize="isAuthenticated()"
th:text="${#authentication.principal.username}">
</li>-->
<li sec:authorize="isAuthenticated()"><a
class="dropdown-toggle" data-toggle="dropdown" href="#" th:text="${#authentication.principal.username}">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li sec:authorize="hasRole('ROLE_ADMIN')">
<a th:href="#{/admin}">Administrator</a>
</li>
<li>
<a th:href="${'/user/' + #authentication.principal.username}">User</a>
</li>
</ul>
</li>
<li sec:authorize="!isAuthenticated()">
<a th:href="#{/registration}" data-target="#theModalRegistration"
data-toggle="modal"><span class="glyphicon glyphicon-user"></span>
Sign Up</a>
</li>
<li sec:authorize="!isAuthenticated()">
<a th:href="#{/login}"
data-target="#theModalLogin" data-toggle="modal"> <span
class="glyphicon glyphicon-log-in"></span>Login
</a>
</li>
<li sec:authorize="isAuthenticated()">
<a th:href="#{/cartOfUser/}" role="dialog"
data-target="#theModalCart" data-toggle="modal"> <span
class="glyphicon glyphicon-shopping-cart"></span>
</a>
</li>
<li sec:authorize="isAuthenticated()"><a th:href="#{/logout}"><span
class="glyphicon glyphicon-log-out"></span> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade text-center" id="theModalLogin">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
<div class="modal fade text-center" id="theModalRegistration">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
<div class="modal fade text-center" id="theModalCart">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
<div class="container">
<div layout:fragment="custom-content">
<!-- Your Page Content Here -->
</div>
</div>
<div class="footer">
<h6>#2019 Buy-A-Thing</h6>
</div>
</body>
</html>
this is login.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css"
th:href="#{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<title>Login</title>
</head>
<body>
<!-- Modal content-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h5 class="modal-title">Login</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Login</h1>
<form th:action="#{/login}" method="post">
<div th:if="${param.error}">
<div class="alert alert-danger">Invalid username or
password.</div>
</div>
<div th:if="${param.logout}">
<div class="alert alert-info">You have been logged out.</div>
</div>
<div class="form-group">
<label for="username">Email</label>: <input type="text"
id="username" name="username" class="form-control"
autofocus="autofocus" placeholder="Username" />
</div>
<div class="form-group">
<label for="password">Password</label>: <input type="password"
id="password" name="password" class="form-control"
placeholder="Password" />
</div>
<div class="form-group">
<label>
<input type="checkbox" name="remember-me">
Remember me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit"
class="form-control btn btn-primary" value="Log In" />
</div>
</div>
</div>
<div class="form-group">
<span>New user? <a href="/" th:href="#{/registration}">Register
here</a></span>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script type="text/javascript"
th:src="#{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
<script type="text/javascript"
th:src="#{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</body>
</html>
antMatchers
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.anonymous()
.and()
.authorizeRequests()
.antMatchers("/login")
.permitAll()
.antMatchers("/admin/**").hasRole("ADMIN")
.antMatchers(
"/**",
"/products**",
"/registration**",
"/js/**",
"/css/**",
"/fonts.googleapis.com/css**",
"/img/**",
"/webjars/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.defaultSuccessUrl("/products", true)
.permitAll()
.and()
.logout()
.invalidateHttpSession(true)
.clearAuthentication(true)
.logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
.logoutSuccessUrl("/products")
.deleteCookies("my-remember-me-cokie")
.permitAll()
.and()
.rememberMe()
//.key("my-secure-key")
.rememberMeCookieName("my-remember-me-cookie")
.tokenRepository(persistentTokenRepository())
.tokenValiditySeconds(24 * 60 * 60)
.and()
.exceptionHandling();
}
Controller
#GetMapping("/login")
public String login(Model model) {
return "login";
}
thanks!
I'm trying to create a bootstrap modal in laravel to edit sa post, the problem is that when I click the button or anchor the modal doesn't appears and in some cases it appears but then quickly it disappears I don't know where is the problem I'm new to laravel and I think the problem is with the links ...
app2.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div style="color: white; padding-left: 50px; padding-top: 5px; font-size: 20px; background-color: grey; width: 100%; height: 50px; text-align: left;" >Brand</div>
<div class="container">
#yield('content')
</div>
<!--<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<!--<script type="text/javascript" src="{{asset('js/app.js')}}"></script>-->
<script type="text/javascript" src="{{asset('js/jquery-3.1.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.js')}}"></script>
<script type="text/javascript" src="{{asset('js/app_new.js')}}"></script>
</body>
</html>
dashboard.blade.php
#extends('layouts.app2')
#section('title')
dashboard
#endsection
#section('content')
<h1>Dashboard</h1><br>
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div>
<form action="{{url('/post')}}" method="post">
{{csrf_field()}}
<div class="form-group">
<textarea class="form-control" name="body" id="" cols="50" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<!--<input type="hidden" value="{{Session::token()}}" name="_token">-->
</form>
</div>
</div>
</div><br><br>
#foreach($posts as $post)
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h3>{{$post->body}}</h3>
<p>posted by {{$post->User->name}} on {{$post->created_at->diffForHumans()}}</p>
Edit | Delete | Like | Dislike
</div>
</div>
<br>
#endforeach
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endsection
app_new.js
$('#edit').click(function(){
$('#edit-modal').modal();
});
Use preventDefault() when you click on link.
$('#edit').click(function(e){
e.preventDefault();
$('#edit-modal').modal();
});
And add id='edit-modal' for your div with modal class.
try this
Edit
where #modalEdit is id of modal tag like
<div class="modal" tabindex="-1" role="dialog" id="#modalEdit">
This is one way to call a modal using jquery please try
$('#myModal').modal('show');
Here I am calling view of bootstrap modal using codeigniter function. But its not working proper. Here is code:
In codeigniter:
function alert_breaktime()
{
$this->load->view('break_alert');
}
break_alert.php:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button> <h3 class="modal-title" style="color: red;font-weight: bold;">Message Alert !</h3>
</div>
<?php //$attributes = array('class' => 'bs-example form-horizontal'); echo form_open(base_url().'activity/add',$attributes); ?>
<div class="modal-body">
<div class="message" style="font-size: x-large;">
Hello, <?php
$user_id = $this->tank_auth->get_user_id();
$names = $this->user_profile->get_profile_details($user_id,'fullname') ? $this->user_profile->get_profile_details($user_id,'fullname') : $this->tank_auth->get_username();
echo $names ?> <br>
Please do not forget to <b>Break Out..!!</b>
</div>
<div class="modal-footer">
<?=lang('close')?>
</div>
</div>
</div>
</div>
Since you have told your code is not working I assume you may have not call the bootstrap libraries properly.
I have included all jquery and bootstrap css files to your code and it working in my computer.
below is your code edited by me:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="message" style="font-size: x-large;">
Hello, <?php
$user_id = $this->tank_auth->get_user_id();
$names = $this->user_profile->get_profile_details($user_id,'fullname') ? $this->user_profile->get_profile_details($user_id,'fullname') : $this->tank_auth->get_username();
echo $names ?> <br>
Please do not forget to <b>Break Out..!!</b>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I hope this code would help you..
let me know if there is any problem with that code.
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!