I have an AngularJS ng-option set, and a SQL Server db with some "Champion" names.
I populate my ng-option using this list from the DB, but I am having some problems. Right now I use the following ng-option to setup my list.
<span>
<select style="width:25%" ng-options="champ1.cID as champ1.cName for champ1 in Champions1 | orderBy: 'cName'" ng-init="0" ng-model="champ1" ng-change="part3Valid()">{{champ1.cName}}</select>
</span>
The issue here is that i "think" since my Primary Key list is broken/has gaps, it causes issues with displaying the correct image with the correct option name.
By Image, I mean that my options (on change) updates an image as follows.
Favorite Champions
<!--SET UP LE CHAMPS-->
<div>
<span><img ng-src="/Content/champions/{{Champions1[champ1].cName.trim() || 'None'}}_Square_0.png" style="width:15%" /></span>
<span><img ng-src="/Content/champions/{{Champions2[champ2].cName.trim() || 'None'}}_Square_0.png" style="width:15%" /></span>
<span><img ng-src="/Content/champions/{{Champions3[champ3].cName.trim() || 'None'}}_Square_0.png" style="width:15%" /></span>
</div>
<div>
<span><select style="width:25%" ng-options="champ1.cID as champ1.cName for champ1 in Champions1 | orderBy: 'cName'" ng-init="0" ng-model="champ1" ng-change="part3Valid()">{{champ1.cName}}</select></span>
<span><select style="width:25%" ng-options="champ2.cID as champ2.cName for champ2 in Champions2 | orderBy: 'cName'" ng-init="0" ng-model="champ2" ng-change="part3Valid()">{{champ2.cName}}</select></span>
<span><select style="width:25%" ng-options="champ3.cID as champ3.cName for champ3 in Champions3 | orderBy: 'cName'" ng-init="0" ng-model="champ3" ng-change="part3Valid()">{{champ3.cName}}</select></span>
</div>
So the actual list of names in my options is CORRECT and IN ORDER, but the images do not line up, for example the first option shown is for "Aaatrox", but it shows the image for "Akali". Hence why I think when I am updating the image (Champions1[champ1].cName.trim()), I think am getting a differently ordered/structured list for the ng-src setup versus the ng-option setup, but I am not sure how to fix this, or where the mis-align is coming from.
Here is my API call and the factory (stuck together for readability).
[HttpGet]
public HttpResponseMessage GET()
{
using (MoviesEntities db = new MoviesEntities())
{
var query = from champs in db.championLists
select new
{
cID = champs.ID,
cName = champs.Name,
};
HttpResponseMessage msg = new HttpResponseMessage();
msg.Content = new ObjectContent<object>(query.OrderBy(x => x.cName).ToList(), new System.Net.Http.Formatting.JsonMediaTypeFormatter());
msg.StatusCode = HttpStatusCode.OK;
return msg;
}
}
---------------------------------------
app.factory('championService', function ($http) {
var championService = {};
championService.getResources = function () {
return $http({
url: '/API/APIChampions',
method: "GET"
})
}
return championService;
});
I set the service equal to champ1/2/3.
Here is my DB list, as you can see my PKID has some gaps so I think that may be an issue when I call it into my app? (also note new names are added at end of list, even though I re-order it)
1 None 2 Aatrox 3 Ahri 4 Akali 5 Alistar 6 Amumu 7 Anivia 8 Annie 9 Ashe 10 Blitzcrank 11 Brand 12 Braum 13 Caitlyn 14 Cassiopeia 15 Chogath 16 Corki 17 Darius 18 Diana 19 Draven 20 DrMundo 21 Elise 22 Evelynn 23 Ezreal 25 Fiora 26 Fizz 27 Galio 28 Gangplank 29 Garen 30 Gragas 31 Graves 32 Hecarim 33 Heimerdinger 34 Irelia 35 Janna 36 JarvanIV 37 Jax 38 Jayce 39 Jinx 40 Karthus 41 Katarina 42 Kayle 43 Kennen 45 Leblanc 46 LeeSin 47 Leona 48 Lissandra 49 Lucian 50 Lulu 51 Lux 52 Malphite 53 Malzahar 54 Maokai 55 MasterYi 56 MissFortune 57 Mordekaiser 58 Morgana 59 Nami 60 Nasus 61 Nautilus 62 Nidalee 63 Nocturne 64 Nunu 65 Olaf 66 Orianna 67 Pantheon 68 Poppy 69 Quinn 70 Rammus 71 Renekton 72 Rengar 73 Riven 74 Rumble 75 Ryze 76 Sejuani 77 Shaco 78 Shen 79 Shyvana 80 Singed 81 Sion 82 Sivir 83 Skarner 84 Sona 85 Soraka 86 Swain 87 Syndra 88 Talon 89 Taric 90 Teemo 91 Thresh 92 Tristana 93 Trundle 94 Tryndamere 95 TwistedFate 96 Twitch 97 Udyr 98 Urgot 99 Varus 100 Vayne 101 Veigar 102 Vi 103 Viktor 104 Vladimir 105 Volibear 106 Warwick 108 Xerath 109 XinZhao 110 Yasuo 111 Yorick 112 Zac 113 Zed 114 Ziggs 115 Zilean 116 Zyra 117 Karma 118 Khazix 119 Velkoz 120 Gnar 123 Kalista 124 RekSai 126 KogMaw 128 Wukong 1122 FiddleSticks
Still newer to API calls and AngularJS so I am struggling with figuring out the problem.
When you do this: Champions1[champ1].cName.trim() you are accessing a position in the champions array which is not necessarily the same as the id you are passing.
But you can use ng-options like this:
ng-options="champ1.cName for champ1 in Champions1 | orderBy: 'cName'"
And then:
<img ng-src="/Content/champions/{{champ1.cName.trim() || 'None'}}_Square_0.png" style="width:15%" />
Or if you only need the name:
ng-options="champ1.cName as champ1.cName for champ1 in Champions1 | orderBy: 'cName'"
And then:
<img ng-src="/Content/champions/{{champ1.trim() || 'None'}}_Square_0.png" style="width:15%"/>