I have a collection of checkboxes for Monday to Sunday and below that a list of objects that are loaded dynamically from an http request. I have a < pre > item that binds my object 'shifts' to the DOM and shows me the json output. As it is right now the items loaded from the http request when clicked will not update the json, but the kicker is, once a day of the week checkbox is clicked and then an item loaded from the request is clicked it works as expected. I have included some code for your viewing pleasure.
HTML Partial
<div class="form-inline text-center">
<div class="form-group">
<div class="checkbox-custom checkbox-primary">
<input type="checkbox" id="sunday" ng-model="shift.days.sunday">
<label for="sunday">Sun</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-custom checkbox-primary">
<input type="checkbox" id="monday" ng-model="shift.days.monday">
<label for="monday">Mon</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-custom checkbox-primary">
<input type="checkbox" id="tuesday" ng-model="shift.days.tuesday">
<label for="tuesday">Tue</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-custom checkbox-primary">
<input type="checkbox" id="wednesday" ng-model="shift.days.wednesday">
<label for="wednesday">Wed</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-custom checkbox-primary">
<input type="checkbox" id="thursday" ng-model="shift.days.thursday">
<label for="thursday">Thu</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-custom checkbox-primary">
<input type="checkbox" id="friday" ng-model="shift.days.friday">
<label for="friday">Fri</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-custom checkbox-primary">
<input type="checkbox" id="saturday" ng-model="shift.days.saturday">
<label for="saturday">Sat</label>
</div>
</div>
</div>
<br>
<div class="text-center strong">For</div>
<br>
<div class="text-center">
<div class="form-group" ng-repeat="machine in machineObj">
<div class="checkbox-custom checkbox-primary">
<input type="checkbox" ng-model="shift.machines[machine.Address]" name="machineGroup" id="{{machine.Name}}">
<label for="{{machine.Name}}">{{machine.Name}}</label>
</div>
</div>
</div>
<pre ng-bind="shift | json"></pre>
Below is the json object I am calling from an http request:
[
{
"Name": “Random 1“,
"Address": "0013A20040B4DDB4",
"Progress": 27.424768518519,
"Active": false,
"Dates": [
{
"date": "November 2014"
},
{
"date": "December 2014"
},
{
"date": "January 2015"
},
{
"date": "February 2015"
},
{
"date": "March 2015"
},
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "GREEN LIGHT\r"
},
{
"input": "COOLANT PUMP\r"
},
{
"input": "SPINDLE\r"
},
{
"input": "PALLET ROTATE\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 2“,
"Address": "0013A20040B2FCC6",
"Progress": 100,
"Active": false,
"Dates": [
{
"date": "November 2014"
},
{
"date": "December 2014"
},
{
"date": "January 2015"
},
{
"date": "February 2015"
},
{
"date": "March 2015"
},
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "MACHINE READY\r"
},
{
"input": "COOLANT PUMP\r"
},
{
"input": "SPINDLE\r"
},
{
"input": "PALLET ROTATE\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 3“,
"Address": "0013A20040BE217C",
"Progress": 20.896990740741,
"Active": false,
"Dates": [
{
"date": "December 2014"
},
{
"date": "January 2015"
},
{
"date": "February 2015"
},
{
"date": "March 2015"
},
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "MACHINE READY\r"
},
{
"input": "SPINDLE\r"
},
{
"input": "SPARE\r"
},
{
"input": "SPARE\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 4“,
"Address": "0013A20040C164D3",
"Progress": 100,
"Active": false,
"Dates": [
{
"date": "January 2015"
},
{
"date": "February 2015"
},
{
"date": "March 2015"
},
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "HYDRAULIC\r"
},
{
"input": "PALLET\r"
},
{
"input": "SPINDLE\r"
},
{
"input": "INPUT 4\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 5”,
"Address": "0013A20040C165BC",
"Progress": 15.364583333333002,
"Active": true,
"Dates": [
{
"date": "February 2015"
},
{
"date": "March 2015"
},
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "MACHINE READY\r"
},
{
"input": "DOOR OPEN \r"
},
{
"input": "SPINDLE\r"
},
{
"input": "PALLET ROTATE\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 6“,
"Address": "0013A20040C1665B",
"Progress": 47.118055555556,
"Active": false,
"Dates": [
{
"date": "February 2015"
},
{
"date": "March 2015"
},
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "MACHINE READY\r"
},
{
"input": "DOOR OPEN\r"
},
{
"input": "SPINDLE\r"
},
{
"input": "INPUT 4\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 7“,
"Address": "0013A20040C165B4",
"Progress": 0,
"Active": false,
"Dates": [
{
"date": "February 2015"
},
{
"date": "March 2015"
},
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "CONTROL ON\r"
},
{
"input": "PART LOADED\r"
},
{
"input": "SPARE\r"
},
{
"input": "SPARE\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 8“,
"Address": "0013A20040D4B3A8",
"Progress": 81.116898148148,
"Active": false,
"Dates": [
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "MACHINE READY\r"
},
{
"input": "SPINDLE \r"
},
{
"input": "TURRET \r"
},
{
"input": "INPUT 4\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 9“,
"Address": "0013A20040D4B34A",
"Progress": 100,
"Active": false,
"Dates": [
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "MACHINE READY\r"
},
{
"input": "SPINDLE 1\r"
},
{
"input": "TURRET 1\r"
},
{
"input": "SPINDLE 2\r"
},
{
"input": "TURRET 2\r"
},
{
"input": "SPARE\r"
},
{
"input": "SPARE\r"
},
{
"input": "SPARE\r"
}
],
"WorkPeriod": "24"
},
{
"Name": “Random 10”,
"Address": "0013A20040A5A7B3",
"Progress": 0,
"Active": false,
"Dates": [
{
"date": "January 2014"
},
{
"date": "February 2014"
},
{
"date": "March 2014"
},
{
"date": "April 2014"
},
{
"date": "May 2014"
},
{
"date": "June 2014"
},
{
"date": "July 2014"
},
{
"date": "August 2014"
},
{
"date": "September 2014"
},
{
"date": "October 2014"
},
{
"date": "November 2014"
},
{
"date": "December 2014"
},
{
"date": "January 2015"
},
{
"date": "February 2015"
},
{
"date": "March 2015"
},
{
"date": "April 2015"
},
{
"date": "May 2015"
},
{
"date": "June 2015"
}
],
"Hardware": [
{
"input": "BENDER\r"
},
{
"input": "HYDRAULICS\r"
},
{
"input": "PUNCH\r"
},
{
"input": "CYCLE\r"
}
],
"WorkPeriod": "24"
}
]
When navigating to the page the days of the week checkboxes are already loaded but the object json above is done asynchronously and shows up 5 seconds after the page is loaded. I can not imagine this is the issue. Feeling kind of lost and appreciate any assistance or guideance you can give
Aucun commentaire:
Enregistrer un commentaire