JSFiddle - React, Tailwind, and code Playground
by Yang Tyler
HTML
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<div ng-app="MyApp">
<div ng-controller="MainController">
<div class="EquipItems" ng-repeat="(key,value) in Day.equipment track by $index">
<label class="item item-input item-select">
<div class="input-label">
{{key}}
</div>
<select ng-model="value[$index].itemName" ng-options="item as item for item in Equipment.{{key}}">
<option value="">Select Option</option>
</select>
</label>
<label class="item item-input">
<input type="number" ng-model="value[$index].value" placeholder="Amount/Value">
</label>
<button class="button button-balanced button-outline button-block" ng-click="AddItem(value)">
Add {{key}}
</button>
</div>
</div>
</div>
JavaScript
var myApp = angular.module("MyApp", []);
myApp.controller("MainController", function($scope){
$scope.AddItem = function(value){
console.log(value);
console.log(Object.prototype.toString.apply(value)); //[object Array]
};
$scope.Day = {
staff : [
{
name : '',
designation : '',
timeIn : '',
timeOut : ''
}
],
vehicles : [
{
type : '',
distance : ''
}
],
equipment : {
Staff : [
{
itemName : '',
value : ''
}
],
Equipment : [
{
itemName : '',
value : ''
}
],
Vehicles : [
{
itemName : '',
value : ''
}
],
Absorbents : [
{
itemName : '',
value : ''
}
],
PPE : [
{
itemName : '',
value : ''
}
]
},
comment : [
{
time : '',
comment : ''
}
],
photos : [
{
src : '',
comment : ''
}
]
...