I would like to know what is the best way to do something like this, I have this form:
<div class="telefono">
<label>Telefonos</label>
<div class="tel" *ngFor="let t of tfonos">
<div class="row">
<div class="col-md-2">
<label for="tfijo">Telefono fijo</label>
<input type="text" class="form-control" [(ngModel)]="telefono.telFijo" name="tfijo">
</div>
<div class="col-md-2">
<label for="tcel">Telefono Celular</label>
<input type="text" class="form-control" [(ngModel)]="telefono.telCelular" name="tcel">
</div>
<div class="col-md-3">
<label for="email">E-mail</label>
<input type="email" class="form-control" [(ngModel)]="telefono.email" name="email">
</div>
</div>
</div>
</div>
<button type="button" (click)="agregar()" class="btn btn-primary">Add</button>
The button agregar adds an element to tfonos so the div gets duplicated, the issue is that the [(ngModel)] also gets duplicated and binds them together, the ideal scenario for me would be to give each duplicate a different ngModel instance or something along those lines.
You should put telefono instances inside your tfonos array.
<div class="telefono">
<label>Telefonos</label>
<div class="tel" *ngFor="let t of tfonos; let i = index">
<div class="row">
<div class="col-md-2">
<label for="tfijo">Telefono fijo</label>
<input type="text" class="form-control" [(ngModel)]="t.telFijo"
[name]="'tfijo' + i">
</div>
<div class="col-md-2">
<label for="tcel">Telefono Celular</label>
<input type="text" class="form-control" [(ngModel)]="t.telCelular"
[name]="'tcel' + i">
</div>
<div class="col-md-3">
<label for="email">E-mail</label>
<input type="email" class="form-control" [(ngModel)]="t.email"
[name]="'email' + i">
</div>
</div>
</div>
</div>
Related
I am new to Angular. I am trying to display rows of data in a tabular column format. But each field in a row is displayed as row. I want each field in a row to be displayed next to each other as different columns in a single row. Below is my HTML code:
<div class='container'>
<h2 class="page-header">Add Contact</h2>
<form (submit)="addContact()">
<div class="form-group">
<label>First Name</label>
<input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
</div>
<input type="submit" class="btn btn btn-success" value="Add">
</form>
</div>
<hr>
<div class="container">
<div *ngFor="let contact of contacts">
<div class="col-md-3">
{{contact.first_name}}
</div>
<div class="col-md-3">
{{contact.last_name}}
</div>
<div class="col-md-3">
{{contact.phone}}
</div>
<div class="col-md-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
</div>
This looks like a bootstrap issue. Try wrapping your col-md-3 divs in a row.
<div class="row">
<div class="col-md-3">
{{contact.first_name}}
</div>
<div class="col-md-3">
{{contact.last_name}}
</div>
<div class="col-md-3">
{{contact.phone}}
</div>
<div class="col-md-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
In this codepen, you can visualize it: https://codepen.io/capozzic1/pen/rrYzaV
Change from col-md-3 to col-xs-3 or col-sm-3. I'm guessing your viewport is larger than md, so it falls back to full width.
Try running the snippet below
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class='container'>
<h2 class="page-header">Add Contact</h2>
<form (submit)="addContact()">
<div class="form-group">
<label>First Name</label>
<input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
</div>
<input type="submit" class="btn btn btn-success" value="Add">
</form>
</div>
<hr>
<div class="container">
<div *ngFor="let contact of contacts">
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
</div>
I suggest, use Angular Flex for arranging your <div>s as per your requirement. Its pretty simple once your know how to use Angular Flex(refer).
I have this code for passing values from multiple inputs to other inputs and it's working well. The problem is that I'm saving the value of one input inside an object, but if I do this process, I'll have to add 8 values inside the object and inside conditions statements.
I found this answer
How can I add it to my code and make it works?
How I can get the values of the 8 inputs and pass it to other 8 inputs.
This is my JS code:
var data = {
first_name: $('#first_name'),
}
if ($('#checkbox').is(':checked')) {
$('#check_name').val(data.first_name.val());
}
$('#checkbox').change(function() {
if ($('#checkbox').is(':checked')) {
$('#check_firstname').val(data.first_name.val());
} else {
$('#check_name').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is my view
//These are which I'm getting the values
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked" id="first_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
</form>
<!--These are the inputs which I'm passing the values-->
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check" id="check_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
</form>
try this:
$(".mt-4.mb-4.ml-4:eq(0) .row").each(function(i,r){
$(".mt-4.mb-4.ml-4:eq(1) .row:eq("+$(r).index()+") input").val(function(I){return $(r).find(".col:eq("+$(this).parent().index()+")>input").val();});
});
this works with this html structure.
How about if you do this:
$('.checked').keyup(function () {
if (this.id === 'first_name' && ...some other condition...) {
$('#check_name').val(this.value);
}
});
Changed keydown to keyup because on keydown if you type fast it might happen to skip some data
Basically Yoannes's approach is a good idea. I kept the keyup()-bit! However, it gets a bit tedious with all of the name and attribute comparing business.
Basically, jQuery offers a builtin method index(). This method returns the relative position of a matched element within its parent container. This would have worked if all of your input elements were in a common parent <div>. As this is not the case we will have to dig a little deeper:
My approach creates two jquery selections of input elements. One for each of your <form>s: src and trg. I then attach the keyup-event to all input elements of the first form. The attached function gets the current value of the input and finds the relative position of the element in the array of matched DOM-elements of src. The function then sets the value of the idx-th element of the jquery-trg-collection to txt. And that is all: jquery - write less, do more!
And, yes, it can also be done with the .on('input' ...) binding, like this:
var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
var srca=$('form.mt-4.mb-4.ml-4:eq(0) input').on('input',function(){
trg.eq($.inArray(this,srca)).val($(this).val());
}).get()
var src=$('form.mt-4.mb-4.ml-4:eq(0) input'), srca=src.get();
var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
src.keyup(function(){
var idx=$.inArray(this,srca);
var txt=$(this).val();
trg.eq(idx).val(txt);
})
form {font-family:verdana;font-size:8pt}
div.col {display:inline-block}
h6 {font-size:6pt;margin:0px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>1First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked" id="first_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
</form>
<!--These are the inputs which I'm passing the values-->
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>2First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check" id="check_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
</form>
I am having a problem removing an element from a form when a select input option is changed. When the select input is placed to "Manually Specify" the javascript correctly adds to the form as i would expect. When the option is changed again to anything other than "Manually Specify i would like it to remove the form inputs previously added, but can not seem to get this to work.
$(function() { /* DOM ready */
$("#distanceSelect").change(function() {
if ($(this).val() == "Manually Specify") {
var html = $("#distanceSpecifyInput").html();
$("#distanceSelectInput").after(html);
} else {
var child = document.getElementById("distanceSpecifyInput");
if (child) {
child.parentNode.removeChild(child);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="form-group row" id="distanceSelectInput">
<div class="col-sm-3">
<label for="distanceSelect" class="control-label">Distance:</label>
<select class="form-control" id="distanceSelect">
<option>5km</option>
<option>10km</option>
<option>Half Marathon</option>
<option>Marathon</option>
<option>Manually Specify</option>
</select>
</div>
</div>
<div class="hide" id="distanceSpecifyInput">
<div class="form-group row">
<div class="col-sm-1">
<input type="number" class="form-control" step="0.1" id="distance">
</div>
<div class="col-sm-2">
<select class="form-control" name="distanceFormat" id="distanceFormat">
<option>miles</option>
<option>km</option>
<option>meters</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<label for="hours" class="control-label">Desired Finish Time:</label>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
</div>
</form>
</div>
Thanks for any help.
You should create a specific DIV to hold the content, rather than using .after(). That way you can clear it with .empty().
$(function() { /* DOM ready */
$("#distanceSelect").change(function() {
if ($(this).val() == "Manually Specify") {
var html = $("#distanceSpecifyInput").html();
$("#distanceOutput").html(html);
} else {
$("#distanceOutput").empty();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="form-group row" id="distanceSelectInput">
<div class="col-sm-3">
<label for="distanceSelect" class="control-label">Distance:</label>
<select class="form-control" id="distanceSelect">
<option>5km</option>
<option>10km</option>
<option>Half Marathon</option>
<option>Marathon</option>
<option>Manually Specify</option>
</select>
</div>
</div>
<div class="hide" id="distanceSpecifyInput">
<div class="form-group row">
<div class="col-sm-1">
<input type="number" class="form-control" step="0.1" id="distance">
</div>
<div class="col-sm-2">
<select class="form-control" name="distanceFormat" id="distanceFormat">
<option>miles</option>
<option>km</option>
<option>meters</option>
</select>
</div>
</div>
</div>
<div id="distanceOutput">
</div>
<div class="form-group row">
<div class="col-sm-12">
<label for="hours" class="control-label">Desired Finish Time:</label>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
</div>
</form>
</div>
Note that copying the HTML like this results in duplicate IDs distance and distanceFormat. IDs are supposed to be unique, so you should fix up the IDs after copying.
what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap.
Here is my html part:-
<div class="container">
<div class="jumbotron checkInGuest">
<h3 class="h3Heading">Request for following information from guest</h3>
<form class="form-horizontal" id="checkInForm">
<div class="form-group">
<label for="reservationId" class="col-md-4">Reservation Id</label>
<div class="col-md-8">
<input type="text" class="form-control" id="reservationId" name="reservationId" required>
</div>
</div>
<div class="form-group">
<label for="dlNum" class="col-md-4">Driver License #</label>
<div class="col-md-8">
<input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
</div>
</div>
</form>
<!-- Form when info is found. Initially all fields are disabled-->
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Information Found</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="resId" class="col-md-3">Reservation Id</label>
<div class="col-md-3">
<input type="text" class="form-control" id="resId" name="resId" disabled>
</div>
<label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
<div class="col-md-3">
<input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
</div>
</div>
<div class="form-group">
<label for="guestFullName" class="col-md-3">Guest Full Name</label>
<div class="col-md-3">
<input type="text" class="form-control" id="guestFullName" name="guestFullName" disabled>
</div>
<label for="email" class="col-md-3">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" id="email" name="email" disabled>
</div>
</div>
<div class="form-group">
<label for="numRooms" class="col-md-3">Rooms Booked</label>
<div class="col-md-3">
<input type="number" class="form-control readable" id="numRooms" name="numRooms" disabled>
</div>
<label for="roomType" class="col-md-1">Room Type</label>
<div class=" col-md-2">
<label for="smoking">
<input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
</label>
</div>
<div class=" col-md-3">
<label for="nonSmoking">
<input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
</label>
</div>
</div>
<div class="form-group">
<label for="discount" class="col-md-3">Discount</label>
<div class="col-md-3">
<select class="form-control readable" id="discount" disabled>
<option selected>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
</select>
</div>
<label for="checkInDate" class="col-md-3">CheckIn Date</label>
<div class="col-md-3">
<input type="date" class="form-control readable" id="checkInDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<label for="checkOutDate" class="col-md-3">CheckOut Date</label>
<div class="col-md-9">
<input type="date" class="form-control readable" id="checkOutDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
</div>
</div>
</form>
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Final Room Order</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
<div class="col-md-8 " id="perInEachRoom">
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="checkInButton">Check In</button>
</div>
</div>
</div>
</form>
</div>
</div>
And this is jquery part:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
</script>
You need to put your code in a document.ready() function, so:
$(document).ready(function() {
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
});
You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?
Long story short, you should use
<button type="button"...
not
<button type="submit"...
Actually, all I did is:-
$("#checkInForm").submit(function(e)
{
e.preventDefault();
});
And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.
Relatively new to Angular, and trying to create a form that is used for both create and edit operations. There are forms fields that I am hoping to share, but from what I understand ng-include creates a new scope, so my fields (using ng-model) are not bound to the original scope. The result is that when the form is submitted my fields are not sent in.
If I am going about this the wrong way, please direct me to any documentation that might be of assistance. Part of my problem is I am not sure where to look at this point. Thanks!
Create Form
<section data-ng-controller="AlbumsController">
<div class="page-header">
<h1>New Album</h1>
</div>
<form data-ng-submit="create()">
<section data-ng-include="'/modules/albums/views/form.html'"></section>
<input type="submit" class="btn btn-primary" value="Add Album">
</form>
</section>
Form Partial
<fieldset class="well">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="album.name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="name">Album Picture</label>
<div class="controls">
<input type="text" data-ng-model="album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="releaseDate">Release Date</label>
<div class="controls">
<input type="date" data-ng-model="album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="sku">SKU</label>
<div class="controls">
<input type="text" data-ng-model="album.sku" id="sku" class="form-control" placeholder="SKU" required>
</div>
</div>
</fieldset>
change: <section data-ng-include="'/modules/albums/views/form.html'"></section>
to: <section data-ng-include src="'/modules/albums/views/form.html'"></section>
As I see, you do it right. What you may left is you need to define $scope.album on the $scope before use it on child scope.
$scope.album = {}; // set it on your AlbumsController
I have the same problem with you, in my solution, I used parent scope to bind data at child view. Like this:
<fieldset class="well">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="name">Album Picture</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="releaseDate">Release Date</label>
<div class="controls">
<input type="date" data-ng-model="$parent.album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="sku">SKU</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.sku" id="sku" class="form-control" placeholder="SKU" required>
</div>
</div>
</fieldset>
It's ugly, but work's good for me.