In my script, I am using the following code:
for (var i in $scope.hulls) {
if ($scope.hulls[i].id == 1234) {
console.log($scope.hulls[i]);
$scope.selectedHullShip1 = $scope.hulls[i];
}
}
The code works fine outside of the onclick button, but fails to run inside the onclick button. I'm struggling to figure out why this is happening as my knowledge is limited and I am learning on the go.
Below is a snippet with the code working outside of the onclick event. Through console logging, I found out that this particular line does not execute properly:
$scope.selectedHullShip1 = $scope.hulls[i];
You can also check the fiddle for further reference here.
var app = angular.module('myApp',[]);
app.controller('myCtrl',function ($scope){
$scope.hulls = [
{id:4271, "name":"Everest", "src": "Everest", "Class": "Garrison", Cost:{"Oil":200000, "Metal":200000,"Energy":200000,"Zynth":200000,"Time":256075},Vars:{"maxweight":80000, "Combat_Speed":35, "Turn_Speed":35, "Map_Speed":178, "Cargo":20000000, "Repair_Duration":10800, "Mortar_Reload_Decrease":50, "Mortar_Range_Increase":20, "Projectile_Speed_Increase":10, "Splash_Increase":5, "Mortar_Critical_Chance":10, "Building_Damage_Increase":200, "Wall_Damage_Increase":600, "Armour_Points":240000000 } },
//Some Random Test Data
...
submit.onclick = function(){
alert("HI")
}
for (var i in $scope.hulls) {
if ($scope.hulls[i].id == 1234) {
console.log($scope.hulls[i]);
$scope.selectedHullShip1 = $scope.hulls[i];
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Kixeye Code: <input id="KixCode" type="text" style="width: 26%" value="eNqrVsoozcnxdFGyMjEyN9RRSq0oSC0qcSrNzElRskpLzClO1VEqT00syM8rVrKKNjUwMInVUSouSE3OBMpBRCxBItmZYAWGBgZmlgbm5rG1AP+nG5g=
">
<button id="submit">Load</button>
<br><br>
<select ng-model="selectedHullShip1" ng-options="hull.name group by hull.Class for hull in hulls | orderBy:'name'"></select><br><br>
Output: {{selectedHullShip1}} <br><br><br><br>
</div>
</body>