We Keep Coding

I want to alert on when checkbox checked but this code is not working

I'm trying to figure out why the alert boxes and console logs don't work as intended when I check a checkbox.
jquery code
$(document).ready(function(){
$("#location").click(function(){
$("input[name='location']:checked").each(function(){
alert("go");
});
});
});
laravel blade checkbox code
<div class="sidebar-box">
<h5>Location</h5>
<ul class="checkbox-list">
#foreach($store_location as $store_location)
<li class="checkbox">
<label>
<input type="checkbox" class="i-check" id="location" name="location">
{{ $store_location->store_location_name }}
</label>
</li>
#endforeach
</ul>
</div>

First you should answer, if the #foreach loop works fine and renders the ul > li list correctly. I gues it works.
The JS Code
I've rewritten your code and it works even though there is a problem in your code. You really should use non-identical id attributes. You can use classes or what ever multiple times in different HTML tags, but not the id attribute. But this does not cause the problem. Have a look on the example:
Example (in plain JavaScript)
document.querySelectorAll('#location').forEach(locationEl => {
locationEl.addEventListener('click', () => {
document.querySelectorAll('input[name=location]:checked').forEach(el => {
console.log('go');
});
});
});
/*
"Equivalent" to your jQuery Code:
$(document).ready(function(){
$("#location").click(function(){
$("input[name='location']:checked").each(function(){
alert("go");
});
});
});
*/
<ul>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
</ul>
Better:
document.querySelectorAll('input[name=location]').forEach(locationEl => {
locationEl.addEventListener('click', () => {
document.querySelectorAll('input[name=location]:checked').forEach(el => {
console.log(el.value, 'is checked');
});
});
});
<ul>
<li>
<input type="checkbox" name="location" value="1">
</li>
<li>
<input type="checkbox" name="location" value="2">
</li>
<li>
<input type="checkbox" name="location" value="3">
</li>
<li>
<input type="checkbox" name="location" value="4">
</li>
</ul>
With input[name=location] as a selector you are addressing any input tag with an attribute name with a value of location. And this should just work.
The Blade Template Code
You are using most probably by accident the same variable name for the variable which should be iterated and the output item of each loop. You should try to rename them depending on the name of the variable which holds the array of your desired information:
<div class="sidebar-box">
<h5>Location</h5>
<ul class="checkbox-list">
#foreach($store_location as $location)
<li class="checkbox">
<label>
<input type="checkbox" class="i-check" name="location">
{{ $location->store_location_name }}
</label>
</li>
#endforeach
</ul>
</div>
If this won't work, consider to upload some part of your rendered HTML code. The one you've uploaded is the blade code, right? Or try to debug your variables that you've pushing toward your blade template. Good luck!

Show value dropdown button with JavaScript in Laravel

I want to show my value when I click the button like this:
I want to show that value using JavaScript, but I can't. Because this is make me confused.
This is code in view blade:
<!-- Category Field -->
<div class="form-group col-sm-6">
{!! Form::label('category_id', 'Category:') !!}
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
#foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio"> {{ $occasions }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
#foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio"> {{ $types }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
#foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio"> {{ $flowers }}</label>
</div>
</li>
#endforeach
</div>
</div>
</div>
</div>
And this is code in Controller edit function
public function edit($id)
{
$product = $this->productRepository->findWithoutFail($id);
$store = Store::pluck('name', 'id')->all();
$photo = json_decode($product->photo_list);
$category = Category::pluck('name','id')->all();
$category1 = Category::where('parent_id','=',1)->pluck('name','id')->all();
$category2 = Category::where('parent_id','=',2)->pluck('name','id')->all();
$category3 = Category::where('parent_id','=',3)->pluck('name','id')->all();
if (empty($product)) {
Flash::error('Product not found');
return redirect(route('products.index'));
}
return view('products.edit',compact('product','store','category','photo','category1','category2','category3'));
}
UPDATE CODE
I try this code its work, but when I check 1 button or 2 button only. In other one give me result "undefined".
This is my update code in view blade:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
#foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
#foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio" value="{{ $types }}"> {{ $types }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
#foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers }}"> {{ $flowers }}</label>
</div>
</li>
#endforeach
</div>
</div>
</div>
<script type="text/javascript">
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').val();
var category_types = $('input[name="category[\'types\']"]:checked').val();
var category_flowers = $('input[name="category[\'flowers\']"]:checked').val();
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
</script>
Look my image for detail

You missed value attributes to your radio button. Checkout the below code and kindly repeat it for other fields also.
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>
Jquery
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').val() || '';
var category_types = $('input[name="category[\'types\']"]:checked').val() || '';
var category_flowers =$('input[name="category[\'flowers\']"]:checked').val() || '';
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});

AngularJS multiple submit button repetition

i'm working on AngularJS
I have this problem:
screenshoot
In HTML i used this code for show submit button for two type of form.
One for TEXT Form and one for ENUM Form:
<div ng-controller="githubController3">
<div ng-repeat="x in names | limitTo:1">
<br>
<p>
<h3>{{ x.name }}</h3></p>
</div>
</div>
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction">
<div ng-repeat="x in names">
{{ x.name }}*
<form ng-submit="submitForm()">
<a ng-if="x.id=='name'">
<input type="text" name="nome" ng-model="formData.properties[0].value" placeholder="{{x.name}}"> {{ name }} </input>
</a>
<a ng-if="x.id=='email'">
<input type="email" name="email" ng-model="formData.properties[1].value" placeholder="{{x.name}}"> {{ email }} </input>
</a>
<br>
<a ng-if="x.type=='long'">
<input type="number" name="numero" ng-model="formData.properties[2].value" placeholder="{{x.name}}"> {{ income }} </input>
</a>
<br>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</div>
</div>
</form>
</div>
</div>
<!--NEL CASO DI ENUM PRESENTA QUESTO FORM-->
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction2">
<div ng-repeat="x in names">
{{ x.name }}*
<form ng-submit="submitForm2()">
<a ng-if="x.type=='enum'">
<select ng-model="formData2.properties[0].value" ng-options="y.id as y.name for y in x.enumValues "></select>
</a>
<br>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit Enum!
</button>
</div>
</div>
</form>
How I can show only one submit button instead of multiple repetition of it ?
thanks to all

Error in this line you write submit form inside ng-repeat. It will repeat how much data in names array.
<div ng-repeat="x in names">
Remove ng-repeat then it show only one submit button

Dynamic Angular and Ionic checkbox list

I have my app in Ionic and Angular. I have a list with checkbox items that come from an array. What I want is when the user clicks on a checkbox item, they are added to a separate list i.e my choices.
the code is:
App.js
$scope.myList = [
{name:'Choice one'},
{name:'Choice two)'}
];
HTML VIEW:
<div>
<ul class="list">
<li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
<label class="checkbox">
<input type="checkbox" ng-model="option.myList[$index]">
</label>
<p ng-bind-html="item.name"></p>
</li>
<ul>
</div>
So I want the choices once clicked to be added to a list above which is similar code to the html above. Any ideas?

maybe something like this:
$scope.myList = [
{name:'Choice one'},
{name:'Choice two)'}
];
$scope.myChoices = [];
$scope.stateChanged = function(checked){
if(checked){
$scope.myChoices.push(checked);
}else{
var index = $scope.myChoices.indexOf(checked);
$scope.myChoices.splice(index,1);
}
}
html:
<div>
<ul class="list">
<li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
<label class="checkbox">
<input type="checkbox" ng-model="option.myList[$index]" ng-change='stateChanged(option.myList[$index])'>
</label>
<p ng-bind-html="item.name"></p>
</li>
<ul>
</div>

See this demo with your code : http://play.ionic.io/app/89d16b54285b
You do not need to make a seperate list to show selected options somewhere else. Just attach selected property with each object this way <input type="checkbox" ng-model="item.selected">
<ul class="list">
<li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
<label class="checkbox">
<input type="checkbox" ng-model="item.selected">
</label>
<p ng-bind-html="item.name"></p>
</li>
<ul>
Now you can use same myList anywhere to see which is selected using filter
<div class="item" ng-repeat="item in myList | filter:{selected:true}">
{{item.name}}
</div>

How to make my ng-if stop showing after function success

I want my ng-if="AddEmp" to go false after my ng-click function has succeeded so the content in the ng-if doesn't show any longer, but I can't seem to make it happen.
I use the ng-if since I want the content in the form not to show the next time the form is visible. I always want it to be blank from the start.
How do I make the ng-if="AddEmp" disappear after this function has succeeded?
UserRegistration = function (Role, Id, Gender, Firstnamn, Lastnamn, DateOfBirth, phone, ClassId)
Here is my code:
Entire pages :
angular.module('App')
.controller('SchoolAdminController',
['$scope', '$http', '$location', 'getAllRolesFactory', 'checkUserRolesFactory', 'userRegistrationFactory', 'getAllClassesFactory',
function ($scope, $http, $location, getAllRolesFactory, checkUserRolesFactory, userRegistrationFactory, getAllClassesFactory)
{
var vm = this;
vm.allRoles;
vm.userWithRoles;
vm.userWithoutRoles;
vm.noUsersFound;
vm.allClasses;
getAllRolesFactory.get().then(function (response) {
vm.allRoles = JSON.parse('[' + response.data + ']');
});
vm.AddUser = function ()
{
$location.path('/Register');
}
vm.EditEmployee = function () {
$location.path('/SchoolAdmin/EditEmployee');
}
vm.UserWithoutRoles = function () {
checkUserRolesFactory.get(0).then(function (response) {
vm.userWithoutRoles = JSON.parse('[' + response.data + ']');
if (vm.userWithoutRoles.length < 1) {
vm.noUsersFound = 'Inga användare finns att hantera';
}
});
vm.GetAllClasses();
}
vm.UserWithRoles = function () {
checkUserRolesFactory.get(1).then(function (response) {
vm.userWithRoles = JSON.parse('[' + response.data + ']');
console.log(vm.userWithRoles);
});
}
vm.UserRegistration = function (Role, Id, Gender, Firstnamn, Lastnamn, DateOfBirth, phone, ClassId) {
vm.registerUserInfo = [];
vm.roleInfo = [];
vm.registerUserInfo.push({
Firstname: Firstnamn,
Lastname: Lastnamn,
DateOfBirth: DateOfBirth,
Gender: Gender,
UserId: Id,
ClassId: ClassId,
})
vm.roleInfo.push({
Role : Role,
})
console.log(vm.registerUserInfo);
userRegistrationFactory.register(vm.registerUserInfo, Role).then(function (response) {
$scope.AddEmp = false;
console.log(vm.AddEmp);
console.log("Hello my name is linsey lohan");
});
}
vm.GetAllClasses = function () {
getAllClassesFactory.get().then(function (response) {
console.log(vm.allClasses);
vm.allClasses = JSON.parse('[' + response.data + ']');
console.log(vm.allClasses);
})
}
}]);
#{
ViewBag.Title = "EditEmployee";
}
<div ng-controller="SchoolAdminController as SchoolAdmCtrl">
<div class="col-md-8 gradeSelect" ng-click="SchoolAdmCtrl.UserWithRoles(); editEmp = ! editEmp; AddEmp = false" id="editEmp">
<a><h1>Klicka här redigera Anställd:</h1></a>
</div>
<div class="col-md-8 gradeSelect" ng-if="editEmp">
<div>
#*TODO: Fixa, ta bort Gradeselect på hela formuläret.
En admin ska inte redigera sigsjälv på samma sätt som andra users i systemet.
*#
<form name="EditEmpForm">
<fieldset>
<legend>Välj anställd för hantering</legend>
<ol>
<li>
<label>
Välj roll att tilldela användare<br />
<select ng-model="SelectRole" name="SelectRole_field" ng-options="role as role for role in SchoolAdmCtrl.allRoles" required></select>
<span style="color:red" ng-show="EditEmpForm.SelectRole_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Välj anställd
<select ng-model="selectUserWith" name="SelectUserWith_field"
ng-options=" user as user.Email for user in SchoolAdmCtrl.userWithRoles | filter : {Role : SelectRole}" required></select>
<span style="color:red" ng-show="EditEmpForm.SelectUserWith_field.$error.required">Välj användare</span>
</label>
</li>
<li>
<label>
Sök på person<br />
<input ng-model="Sokperson" type="text" />
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Redigera anställd</legend>
<ol>
<li>
<label>
Kön<br />
<select ng-model="Kon" name="Kon_field" required>
<option>Female</option>
<option>Male</option>
</select>
<span style="color:red" ng-show="EditEmpForm.Kon_field.$error.required">Välj kön</span>
</label>
</li>
<li>
<label>
Förnamn<br />
<input ng-model="Fornamn" name="Fornamn_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Efternamn<br />
<input ng-model="Efternamn" name="Efternamn_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Personnummer<br />
<input ng-model="Personnummer" name="Personnummer_field" type="text" placeholder="ÅÅÅÅ-MM-DD" ng-minlength="10" ng-maxlength="10" ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" required />
<span style="color:red" ng-show="EditEmpForm.Personnummer_field.$error.pattern">Följ "ÅÅÅÅ-MM-DD".</span>
</label>
</li>
<li>
<label>
Telefonnummer<br />
<input ng-model="Telefon" name="Telefon_field" type="text" required ng-minlength="9" ng-maxlength="15" ng-pattern="/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/" />
<span style="color:red" ng-show="EditEmpForm.Telefon_field.$error.pattern">Felaktigt telefonformat.</span>
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Guardian'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj Barn</label>
<select ng-model="selectedItem"></select>
</li> #* lägga till knapp för att kunna lägga till flera barn*#
<li>
<label>Sök barn</label>
<input type="text" requried />
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Student'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj klass</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på klassnamn</label>
<input type="text" required />
</li>
<li>
<label>
Förmyndare 1
<input type="text" required />
</label>
</li>
<li>
<label>
Förmyndare 2
<input type="text" required />
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Teacher'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj klass</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på klassnamn</label>
<input type="text" required />
</li>
<li>
<label>Aktuella klasser för anställd</label>
<ul>
<li>
<label>klass 1 test</label>
<input type="checkbox" />
</li>
<li>
<label>klass 2 test</label>
<input type="checkbox" />
</li>
</ul>
</li>
<li>
<label> Välj Kurs</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på kursnamn</label>
<input type="text" required />
</li>
<li>
<label>Aktuella kurser för anställd</label>
<ul>
<li>
<label>kurs 1 test</label>
<input type="checkbox" />
</li>
<li>
<label>kurs 2 test</label>
<input type="checkbox" />
</li>
</ul>
</li>
<li>
</ol>
</fieldset>
<fieldset>
<button type=submit>Spara ändringar</button>
</fieldset>
</form>
</div>
</div>
<div class="col-md-8 gradeSelect" ng-click="SchoolAdmCtrl.UserWithoutRoles(); SchoolAdmCtrl.GetAllClasses(); AddEmp = ! AddEmp; editEmp = false" id="AddEmp">
<a><h1>Klicka här för att hantera anställda som ännu inte har roller i systemet</h1></a>
</div>
{{AddEmp}}
<div class="col-md-8 gradeSelect" ng-if="AddEmp">
<div>
<h1 style="color:red">{{SchoolAdmCtrl.noUsersFound}}</h1>
<form name="AddEmpForm" ng-if="SchoolAdmCtrl.noUsersFound !=''">
<fieldset>
<legend>Välj anställd för hantering</legend>
<ol>
<li>
<label>
Välj roll att tilldela användare<br />
<select ng-model="SelectRole2" name="SelectRole2_field" ng-options="role as role for role in SchoolAdmCtrl.allRoles" required></select>
<span style="color:red" ng-show="AddEmpForm.SelectRole2_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Hantera anställda som ännu inte har roller i systemet<br />
<select ng-model="selectUserWithout2" name="SelectUserWithout2_field"
ng-options="user as user.Email for user in SchoolAdmCtrl.userWithoutRoles | filter : Sokperson2"
required></select>
<span style="color:red" ng-show="AddEmpForm.SelectUserWithout2_field.$error.required">Välj användare</span>
</label>
</li>
<li>
<label>
Sök på person<br />
<input ng-model="Sokperson2" type="text" />
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Redigera anställd</legend>
<ol>
<li>
<label>
Kön<br />
<select ng-model="Kon2" name="Kon2_field" required>
<option>Female</option>
<option>Male</option>
</select>
<span style="color:red" ng-show="AddEmpForm.Kon2_field.$error.required">Välj kön</span>
</label>
</li>
<li>
<label>
Förnamn<br />
<input ng-model="Fornamn2" name="Fornamn2_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Efternamn<br />
<input ng-model="Efternamn2" name="Efternamn2_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Personnummer<br />
<input ng-model="Personnummer2" name="Personnummer2_field" type="text" placeholder="ÅÅÅÅ-MM-DD" ng-minlength="10" ng-maxlength="10" ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" required />
<span style="color:red" ng-show="AddEmpForm.Personnummer2_field.$error.pattern">Följ "ÅÅÅÅ-MM-DD".</span>
</label>
</li>
<li>
<label>
Telefonnummer<br />
<input ng-model="Telefon2" name="Telefon2_field" type="text" required ng-minlength="9" ng-maxlength="15" ng-pattern="/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/" />
<span style="color:red" ng-show="AddEmpForm.Telefon2_field.$error.pattern">Felaktigt telefonformat.</span>
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole2=='Student'">
<ol>
<li>
<label>
Välj klass för elev<br />
<select ng-model="$parent.selectClass2" name="selectClass2_field" ng-options="klass as klass.Name for klass in SchoolAdmCtrl.allClasses" required></select>
<span style="color:red" ng-show="AddEmpForm.selectRole2_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Sök på klass<br />
<input ng-model="Sokklass2" type="text" />
</label>
</li>
</ol>
</fieldset>
<button type="submit"
ng-disabled="
AddEmpForm.SelectRole2_field.$error.required ||
AddEmpForm.SelectUserWithout2_field.$error.required ||
AddEmpForm.Kon2_field.$error.required ||
AddEmpForm.Fornamn2_field.$error.minlength || AddEmpForm.Fornamn2_field.$error.maxlength || AddEmpForm.Fornamn2_field.$error.pattern || AddEmpForm.Fornamn2_field.$error.required ||
AddEmpForm.Efternamn2_field.$error.minlength || AddEmpForm.Efternamn2_field.$error.maxlength || AddEmpForm.Efternamn2_field.$error.pattern && AddEmpForm.Efternamn2_field.$error.required ||
AddEmpForm.Personnummer2_field.$error.pattern || AddEmpForm.Personnummer2_field.$error.required ||
AddEmpForm.Telefon2_field.$error.pattern || AddEmpForm.Telefon2_field.$error.required"
ng-click="SchoolAdmCtrl.UserRegistration(SelectRole2, selectUserWithout2.Id, Kon2, Fornamn2, Efternamn2, Personnummer2, Telefon2, selectClass2.Id)">
Spara ändringar
</button>
</form>
</div>
</div>
</div>

There are 2 things wrong that stand out.
You're making direct calls to class methods like so: SchoolAdmCtrl.UserWithRoles(). You should really be assigning those methods to your scope in your controller, like this:
$scope.UserWithRoles = function(){ ... }
Then you'll just need to call UserWithRoles(); like this:
ng-click="UserWithRoles();"
You're storing all of your data on that class. This might work just for this example, but like Guido Bouman said above, you should be storing it all on $scope. You're very likely to get undesired behavior if you have another instance of this controller I'd bet. Also, when you do this, you'll need to change all of your vm.blah references to just be blah since it'll be in your scope.