0
AngularJS ng 옵션 세트가 있고 SQL Server 데이터베이스에 "Champion"이름이 있습니다.GAP 기본 키에 연결된 경우 AngularJS ng 옵션 문제가 발생했습니다.
DB에서이 목록을 사용하여 ng-option을 채 웁니다. 그러나 몇 가지 문제가 있습니다. 지금은 다음 목록을 사용하여 목록을 설정합니다.
<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>
여기에 문제
그것은 올바른 옵션의 이름으로 올바른 이미지를 표시에 문제가 발생, 내 기본 키 목록/고장 간격이 있기 때문에 내가 "생각"이다.이미지로, 내 옵션 (변경시)은 다음과 같이 이미지를 업데이트한다는 것을 의미합니다.
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>
그래서 내 옵션에서 이름의 실제 목록은 올바른 순서대로이지만, 이미지가 표시되는 첫 번째 옵션은 "Aaatrox"입니다 예를 들어, 일치하지 않는,하지만 Akali "에 대한 이미지를 보여줍니다 ". 따라서 내가 이미지를 업데이트 할 때 (Champions1[champ1].cName.trim()), 은 ng-src 설치 대 ng-option 설치과 다르게 정렬 된/구조화 된 목록을 얻고 있다고 생각하지만이 문제를 해결하는 방법을 모르거나 오정렬은 어디서 오는지.
다음은 내 API 호출 및 팩토리입니다 (가독성을 위해 함께 사용).
[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;
});
나는 champ1/2/3과 같은 서비스를 설정했다.
여기 내 DB 목록입니다. 제 PKID가 약간의 틈을 가지고있어서 내 앱으로 호출 할 때 문제가 될 수 있다고 생각하십니까?
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
여전히 새로운 API 호출 및 AngularJS와 그래서 난 문제를 파악에 어려움을 겪고 오전 (또한주의 새 이름은 내가 비록 다시 순서가 목록의 마지막에 추가된다).
나는 당신을 사랑한다! 빠른 질문입니다. 공백 옵션 대신 "없음"(내 DB에 있음)을 평가하는 ng 옵션을 시작하는 방법이 있습니까? 전에는 0으로 설정했는데, PKID에는 None이 있지만, 이제는 재 배열 된 것입니다. None은 ng-option의 목록 중간에 없습니다. – Austin
예,''을'select' 안에 추가 할 수 있습니다. –
흠, 그것을 수정하지 않는 것 같습니다. 여전히 공백 (빈) 시작 옵션 – Austin