hola alle freaks.
Jeg tenkte å lære meg litt angularjs om dagen, men fuck det er stress.
Driver å mekker opp et enkelt form jeg sliter litt med.
Jeg har delt opp formet i 4 tabs, som man skal kunne navigere mellom.
Jeg har to litt større problemer, i førsteomgang ihvertfall
1. Jeg vil at man skal kunne navigere mellom tabsa med å trykke på selve taben, og ved en "neste"-knapp.
Funksjonen for taben funker fint, men knappen som bruker samme funksjon funker ikke. Det er litt weird. Er det noe jeg ikke ser her?
(i tillegg tenker jeg å implementere en funksjon så man ikke kan gå videre til neste tab om ikke all info er fyllt ut; noen ide om best practise her?)
2. I tabben "personal info" har jeg et par drop-downs. Ideen er at man i siste tab skal kunne se hva man velger i disse dropdownene. Men, ser ikke ut til at jeg får til dette.
Det funker finfint for de andre input-feltene, men akkurat dropdownen kuker seg til. Er det noen som ser hva som er galt her?
Kode:
Btw, jeg er totalt ubern00b i angular, vær litt grei med tilbakemeldingene a' 
Jeg tenkte å lære meg litt angularjs om dagen, men fuck det er stress.
Driver å mekker opp et enkelt form jeg sliter litt med.
Jeg har delt opp formet i 4 tabs, som man skal kunne navigere mellom.
Jeg har to litt større problemer, i førsteomgang ihvertfall
1. Jeg vil at man skal kunne navigere mellom tabsa med å trykke på selve taben, og ved en "neste"-knapp.
Funksjonen for taben funker fint, men knappen som bruker samme funksjon funker ikke. Det er litt weird. Er det noe jeg ikke ser her?
(i tillegg tenker jeg å implementere en funksjon så man ikke kan gå videre til neste tab om ikke all info er fyllt ut; noen ide om best practise her?)
2. I tabben "personal info" har jeg et par drop-downs. Ideen er at man i siste tab skal kunne se hva man velger i disse dropdownene. Men, ser ikke ut til at jeg får til dette.
Det funker finfint for de andre input-feltene, men akkurat dropdownen kuker seg til. Er det noen som ser hva som er galt her?
Kode:
Kode
<!DOCTYPE html>
<html ng-app="application">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
angular.module('application', [])
.controller('navController', ['$scope', function($scope) {
$scope.tab = 0;
$scope.tabs = ['username','personal info','contry','submit'];
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}])
.controller('formsController', function($scope){
$scope.output = {};
$scope.submit = function() {
};
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
})
.controller('birthdayController', function($scope){
var numberOfYears = (new Date()).getYear() - 10;
var years = $.map($(Array(numberOfYears)), function (val, i) { return i + 1900; });
var months = $.map($(Array(12)), function (val, i) { return i + 1; });
var days = $.map($(Array(31)), function (val, i) { return i + 1; });
$scope.Years = years;
$scope.Months = months;
$scope.Days = days;
$scope.changedValue1 = function(item){
$scope.month = item;
}
$scope.changedValue2 = function(item){
$scope.day = item;
}
$scope.changedValue3 = function(item){
$scope.year =item;
}
})
;
</script>
<style>
body {
background-color: white;
}
.application{
background-color: lightblue;
width: 400px;
margin-left: 50px;
height: 400px;
}
.nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
.nav li{
float: left;
}
li:first-child {
margin-left: 23px;
}
.nav li a{
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:white;
}
li a:hover {
background-color: #959A9C;
}
a.visited{
color: white;
}
.active{
background-color: #444033;
}
.error {
color: darkred;
margin: 2px 0 5px 0;
}
</style>
</head>
<body>
<div class="application" id="application">
<section class="nav" ng-controller="navController">
<ul>
<li ng-class="{active : isSet($index)}" data-ng-repeat="tabinfo in tabs track by $index" >
<a href ng-click="setTab($index)" ng-class="{selected: $index==selectedIndex}">{{tabinfo}}</a>
</li>
</ul>
<br/>
<form ng-controller="formsController" ng-submit="submit()" name="myForm">
<div ng-show="isSet(0)" style="margin-left:20px;">
<input type="text" name="" id="username" ng-required="true" placeholder="username" ng-model="user.username"/>
<br /><br />
<input type="text" id="firstname" ng-required="true" placeholder="frist name" ng-model="user.firstname"/><br />
<input type="text" id="lastname" ng-required="true" placeholder="last name" ng-model="user.lastname"/><br />
<button click="setTab(1)" style="margin-left:127px;">next</button>
</div>
<div ng-show="isSet(1)" style="margin-left:20px;">
<br />
Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<label for="birthday">Day of birth</label>
<div id="birthday" class="ng-scope" ng-controller="birthdayController">
Year : <select ng-model="Years" ng-options="label for label in Years" ng-change="changedValue3(Years)"></select>
Month: <select ng-model="Months" ng-options="label for label in Months" ng-change="changedValue1(Months)"></select>
Day: <select ng-model="Days" ng-options="label for label in Days" ng-change="changedValue2(Days)"></select>
</div><br />
<button click="setTab(2)" style="margin-left:127px;">next</button>
</div>
<div ng-show="isSet(2)">
<div ng-controller="formsController">
<br />
<button ng-click="setTab(3)" style="margin-left:127px;">next3</button>
</div>
</div>
<div ng-show="isSet(3)">
<div id="confirm" style="margin-left:20px;">
Confirm new account:
<pre>{{user.username}}</pre>
<pre>{{user.email}}</pre>
<pre>{{user.firstname}}</pre>
<pre>{{user.lastname}}</pre>
<pre>{{user.gender}}</pre>
<pre>{{year}}</pre>
<pre>{{month}}</pre>
<pre>{{day}}</pre>
<input type="submit" id="submit" value="submit" style="margin-left:127px;"/>
</div>
</div>
</form>
</section>
</div>
</body>
</html>
