can't figure out how dynamically add new model whenever new row added page. example, input select box ng-model= infos.rigbonusinfo.rigname used select box i've added page. have different model attached each select inputs. tried using ng-model= infos.rigbonusinfo.rigname[rigbonus] doesn't work rates same model gets attachedto each rate field.
pretty want bind new model whenever new row gets pushed array.
currently, have nested table following:
<div class="col-lg-5"> <table class="table table-striped table-bordered"> <thead> <tr> <th>rig</th> <th>rig name</th> </tr> </thead> <tbody> <tr ng-repeat="rig in rigs"> <td>{{ $index + 1 }}</td> <td>{{ rig.name }}</td> </tr> </tbody> </table> </div> <div class="col-lg-2"></div> <div class="col-lg-5"> <table class="table table-striped table-bordered"> <thead> <tr> <th>bonus name</th> <th>rate</th> </tr> </thead> <tbody> <tr ng-repeat="bonus in create.rigbonusrates"> <td>{{ bonus.ratename }}</td> <td>{{ bonus.rate }}</td> </tr> </tbody> </table> </div> <table> <thead> <tr> <th>date</th> </tr> </thead> <tbody> <tr ng-repeat="rigdate in rigdatelist track $index"> <td><input ui-date="datepickeroptions" ng-model="date" /></td> <td> <table> <thead> <tr> <th>rig</th> <th>rate1</th> <th></th> <th>rate2</th> <th></th> <th>rate3</th> <th></th> <th>rate4</th> <th></th> <th>comments</th> </tr> </thead> <tr ng-repeat="rigbonus in rigbonuslist track $index"> <td><select ng-options="rig rigs.indexof(rig) + 1 rig in rigs" ng-model="infos.rigbonusinfo.rigname[rigbonus]" ></select></td> @for (var = 1; < 5; i++) { <td><select ng-options="rigbonus.ratename rigbonus in create.rigbonusrates" ng-model="infos.rigbonusinfo.rate@(@i)"></select></td> <td><input type="text" ng-disabled="infos.rigbonusinfo.rate@(@i).ratename != 'special' " ng-model=infos.rigbonusinfo.rate@(@i).rate /></td> } <td><input ng-model="info.rigbonusinfo.comments" /></td> </tr> </table> </td> </tr> </tbody> </table> <div> <button type="button" ng-click="add()">add</button> <button type="button" ng-click="adddate()">add date</button> </div> my current controller has following:
angular.module('rigbonus').controller('rigcreatecontroller', ['$scope', '$http', 'payperiodservice', 'riglegendservice', function ($scope, $http, payperiodservice, riglegendservice, rigbonusrateservice) { $scope.rigs = riglegendservice.getriglegend(); $scope.datepickeroptions = { orientation: 'top', startdate: payperiodservice.getstartdate(), enddate: payperiodservice.getenddate() }; $http({ method: 'get', url: '/home/createdata' }).success(function (data) { $scope.create = data; $scope.infos = { rigbonusinfo: { rigname: $scope.rigs[0], rate1: $scope.create.rigbonusrates[0], rate2: $scope.create.rigbonusrates[0], rate3: $scope.create.rigbonusrates[0], rate4: $scope.create.rigbonusrates[0], comment: "" } }; $scope.add = function () { $scope.rigbonuslist.push(); }; $scope.adddate = function(){ $scope.rigdatelist.push(""); }; }); $scope.rigbonuslist = [$scope.rigbonusinfo]; $scope.rigdatelist = []; $scope.submit = function () { $http.post('/home/create', {model: "testing"} ); }; }]);
i figured out issue. problem was not sure how generate new object when new row of controls added. think should have put on fiddlejs people visualize better. static model used ($scope.infos) ng-model, same model used 2 different controls don't want. want controls unique.
the fix create object had in mind following:
$scope.rigdatelist = [{ date: "", rigbonuslist: [{}] }]; so array of objects object contains date , array of objects.
when want push new objects inside array didn't know create objects @ time. trying figure out way dynamically create new models ng-model declaring them in controller. use following function:
$scope.rigdatelist[$scope.riglistindex].rigbonuslist.push({ rigname: "", rate1: "", rate2: "", rate3: "", comments: "" }); i didn't know use elements inside array ng-repeat. in following case, rigbonus have used model instead of infos model.
<tr ng-repeat="rigbonus in rigdate.rigbonuslist track $index"> <td><select ng-options="rig rigs.indexof(rig) + 1 rig in rigs" ng-model="rigbonus.rigname"></select></td> and when want push outside array use following:
$scope.rigdatelist.push({ date: "", rigbonuslist: [""] }); $scope.riglistindex = $scope.riglistindex + 1; i use index keep track of object i'm in.
Comments
Post a Comment