I have created a dropdown which is populated correctly and which captures a
change in the selected value. However, in my form I have a list of objects
(teams) and I want to click on a team in a list and have the dropdown
populated with the correct details for that team. I think this is some
sort of issue with the scope as you can see here where the code is
published (http://lovelyjubblymvc6.azurewebsites.net/en-GB/Teams) that when
selecting the division manually the value is changed, but when clicking on
Edit there is no change.
Here is the dropdown :
(function () {
"use strict";
//getting the existing module
angular.module("app")
.controller("divisionsController", divisionsController)
.directive("divisionDropdown", divisionDropdown);
//inject http service
function divisionsController($http, $scope, divisionService) {
//$scope.divisions = divisionService.all();
};
function divisionDropdown() {
return {
restrict: "E",
scope: false,
controller: "divisionsController",
template: "<select class='form-control' ng-model='selectedDivision'
ng-options='division.divisionName for division in divisions' required>\
<option style='display:none'
value=''>{{'Select'}}</option>\
</select>"
};
}})();
And here is the form where I am using it :
<div class="row" id="divTeam" ng-app="app" ng-controller="teamsController as
vm">
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-body">
<form novalidate id="AddUpdateTeam"
name="AddUpdateTeam" ng-submit="vm.addUpdateTeam()">
<!--addTeam or updateTeam-->
<div class="form-group">
<input type="text"
ng-model="vm.newTeam.teamId"/>
</div>
<div class="form-group">
<label for="teamName">Team Name</label>
<input id="teamName" type="text"
class="form-control" name="teamName" ng-model="vm.newTeam.teamName"
required ng-minlength="5"
ng-maxlength="50"/>
<span
ng-show="AddUpdateTeam.teamName.$error.required" class="text-warning">Team Name
is required</span>
<span
ng-show="AddUpdateTeam.teamName.$error.minlength" class="text-warning">Team
Name must be at least 5 characters</span>
<span
ng-show="AddUpdateTeam.teamName.$error.maxlength" class="text-warning">Team
Name must be no more than 50 characters</span>
</div>
...
<div class="form-group">
<label for="divisionName">Division Name</label>
<division-dropdown></division-dropdown>
<p>selected division is : {{ selectedDivision |
json }}</p>
</div>
<div class="form-group">
<label for="coachName">Coach Name</label>
<coaches-dropdown></coaches-dropdown>
<p>selected coach is : {{ vm.newTeam.coach |
json }}</p>
</div>
<div class="form-group">
<label for="logoImage">Logo Image</label>
<input id="logoImage" type="text"
class="form-control" name="logoImage" ng-model="vm.newTeam.logoImage"
required ng-minlength="20"
ng-maxlength="100" />
<span
ng-show="AddUpdateTeam.logoImage.$error.required" class="text-warning">Logo
Image is required</span>
<span
ng-show="AddUpdateTeam.logoImage.$error.minlength" class="text-warning">Logo
Image must be at least 20 characters</span>
<span
ng-show="AddUpdateTeam.logoImage.$error.maxlength" class="text-warning">Logo
Image must be no more than 100 characters</span>
</div>
<div class="form-group">
<button type="submit"
ng-disabled="AddUpdateTeam.$invalid">Save</button>
</div>
</form>
@*<button
data-bind="click:team.clearInputFields()">Cancel</button>*@
</div>
</div>
</div>
<div class="col-md-8">
<div class="text-danger" ng-show="vm.errorMessage">{{
vm.errorMessage }}</div>
<wait-cursor></wait-cursor>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Teams</h2>
</div>
<table class="table table-striped table-bordered
table-condensed">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Division</th>
<th>Coach</th>
</tr>
</thead>
<tbody ng-repeat="team in vm.teams">
<tr>
<td>{{ team.teamId }}</td>
<td>{{ team.teamName }}</td>
<td>{{ team.division.divisionName }}</td>
<td>{{ team.coach.coachName }}</td>
<td><a ng-click="vm.editTeam(team)" class="btn
btn-sm btn-primary">Edit</a></td>
<td><a ng-click="vm.deleteTeam(team)"
class="btn btn-sm btn-danger">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is the teamsController :
(function () {
"use strict";
//getting the existing module
angular.module("app")
.controller("teamsController", teamsController);
//inject http service
function teamsController($scope, $http, divisionService) {
$scope.divisions = divisionService.all();
var vm = this;
vm.teams = [];
vm.newTeam = {};
vm.errorMessage = "";
vm.isBusy = true;
//matched to verb, returns promise
$http.get('http://localhost:33201/api/Teams')
.then(function(response) {
//first parameter is on success
//copy response.data to vm.teams (could alternatively use a
foreach)
angular.copy(response.data, vm.teams);
}, function(error) {
//second parameter is on failure
vm.errorMessage = "Failed to load data: " + error;
})
.finally(function() {
vm.isBusy = false;
});
vm.editTeam = function(team) {
vm.newTeam.division = team.division;
$scope.selectedDivision = team.division;
vm.newTeam.teamId = team.teamId;
vm.newTeam.teamName = team.teamName;
vm.newTeam.cheerleaderImage = team.cheerleaderImage;
vm.newTeam.coachImage = team.coachImage;
vm.newTeam.headerImage = team.headerImage;
vm.newTeam.coach = team.coach;
vm.newTeam.logoImage = team.logoImage;
}
vm.addUpdateTeam = function() {
if (vm.team === undefined) {
//define a service, inject that service into both controllers
vm.newTeam.division = $scope.selectedDivision;
//map divisionid and coachid
vm.newTeam.divisionId = vm.newTeam.division.divisionId;
vm.newTeam.coachId = vm.newTeam.coach.coachId;
vm.isBusy = true;
vm.errorMessage = "";
//post, pass newTeam object
$http.post('http://localhost:33201/api/Teams/Add', vm.newTeam)
.then(function(response) {
//success
vm.teams.push(response.data);
vm.teams.sort(function (a, b) {
if (a.teamName.toLowerCase() <
b.teamName.toLowerCase()) return -1;
if (a.teamName.toLowerCase() >
b.teamName.toLowerCase()) return 1;
return 0;
});
vm.newTeam = {}; //clear form
}, function(error) {
//failure
vm.errorMessage = "Failed to save new team: " + error;
})
.finally(function() {
vm.isBusy = false;
});
} else {
alert("edit" + vm.team.teamId);
}
}
vm.deleteTeam = function (team) {
//bind view model to team
vm.newTeam.teamId = team.teamId;
vm.isBusy = true;
vm.errorMessage = "";
//delete, pass newTeam object
$http.delete('http://localhost:33201/api/Teams/Delete/' +
vm.newTeam.teamId)
.then(function (response) {
//success
//refresh list
var index = vm.teams.indexOf(team);
vm.teams.splice(index, 1);
vm.newTeam = {}; //clear form
}, function (error) {
//failure
vm.errorMessage = "Failed to delete team: " + error;
})
.finally(function () {
vm.isBusy = false;
});
}
};})();
And here is the factory
(function() {
"use strict";
//creating the module, required dependencies
//always include a dash in directive names, so they will never be confused
with actual html elements
var app = angular.module("app", ["simpleControls"]);
//use service to inject singleton service into multiple controllers
//service contains logic to fetch data or manipulate it
//http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
app.factory("divisionService", function ($http) {
var divisions = [];
var errorMessage = "";
var isBusy = true;
//matched to verb, returns promise
$http.get('http://localhost:33201/api/Divisions')
.then(function (response) {
//first parameter is on success
//copy response.data to vm.divisions (could alternatively use a
foreach)
angular.copy(response.data, divisions);
}, function (error) {
//second parameter is on failure
errorMessage = "Failed to load data: " + error;
})
.finally(function () {
isBusy = false;
});
return {
all: function () {
return divisions;
},
first: function () {
return divisions[0];
}
};
});
})();
In the vm.editTeam method above the line $scope.selectedDivision =
team.division; does not change the selected value in the dropdown. This is my
first attempt at such dropdown functionality so I have included all the code
here which might be a bit to get through, but can anybody give me any advice on
how to get this working?
Many thanks!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
