angularjs - ng-repeat with angular form select box -
i working angularjs dynamic forms . according userid value generated multiple form field same model name using ng-repeat. using select box loading location. per requirement default need load first option value select box. using ng-init loading first option data not working . inside controller trying select box model value $scope.user.location shown error. can please send js fiddle solution problem.
html
<div ng-app="myapp"> <div ng-controller="myctrl"> <form role="form" name='userform' novalidate> <div class="container"> <div class="row" ng-repeat="user in users"> <div class="form-group"> <div class="col-md-3"> <label>id</label> <input ng-model="user.id" id="user.id" name="user.id" placeholder="enter bugid" type="text" required readonly disabled> </div> <div class="col-md-3"> <label>comments</label> <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea> </div> <div class="col-md-3 "> <label>location</label> <select ng-model="user.location" ng-options="v v in locations" ng-init='user.location=location[0]' name="select2" required> </select> </div> </div> </div> </div> <div class="buttoncontainer text-center btn-container"> <br> <button ng-disabled="userform.$invalid" type="button" id="adduser" ng-click="adduser()">add user</button> <button type="button" class="btn button--default btn--small pull-center">close</button> </div> </form> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> </div> js
var myapp = angular.module('myapp', []); myapp.controller('myctrl', function($scope) { $scope.ids = [1, 2, 3]; $scope.users = $scope.ids.map(function(id) { return { id: id, comment: "", location: "" }; }); $scope.locations = ['india', 'usa', 'jermany', 'china', 'dubai']; $scope.adduser = function() { var data = $scope.users.map(function(user) { //i trying method /*$scope.user.location.push($scope.locations[0]); $scope.user.location = $scope.user.location.slice(); console.log($scope.user.location) doesnt work. */ return { "userid": user.id, "manualcomment": user.comment, "location": user.location } }); console.log("data", data) } });
one way execute ng-init code in $timeout callback. problem comes execution order between directives. delay init $timeout trigger @ next digest.
here example :
var myapp = angular.module('myapp', []); myapp.controller('myctrl', function($scope, $timeout) { $scope.ids = [1, 2, 3]; $scope.users = $scope.ids.map(function(id) { return { id: id, comment: "", location: "" }; }); $scope.locations = ['india', 'usa', 'jermany', 'china', 'dubai']; $scope.initlocation = (user) => { $timeout(() => { user.location = $scope.locations[0]; }); } $scope.adduser = function() { var data = $scope.users.map(function(user) { //i trying method /*$scope.user.location.push($scope.locations[0]); $scope.user.location = $scope.user.location.slice(); console.log($scope.user.location) doesnt work. */ return { "userid": user.id, "manualcomment": user.comment, "location": user.location } }); console.log("data", data) } });<div ng-app="myapp"> <div ng-controller="myctrl"> <form role="form" name='userform' novalidate> <div class="container"> <div class="row" ng-repeat="user in users"> <div class="form-group"> <div class="col-md-3"> <label>id</label> <input ng-model="user.id" id="user.id" name="user.id" placeholder="enter bugid" type="text" required readonly disabled> </div> <div class="col-md-3"> <label>comments</label> <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea> </div> <div class="col-md-3 "> <label>location</label> <select ng-model="user.location" ng-options="v v in locations" ng-init='initlocation(user)' name="select2" required> </select> </div> </div> </div> </div> <div class="buttoncontainer text-center btn-container"> <br> <button ng-disabled="userform.$invalid" type="button" id="adduser" ng-click="adduser()">add user</button> <button type="button" class="btn button--default btn--small pull-center">close</button> </div> </form> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> </div>
Comments
Post a Comment