ng-init value overridden in angular oi-select mutiple options

Question

ng-init value overridden in angular oi-select mutiple options

455 Views Asked by user3760261 At 28 April 2025 at 17:55

I am working on dynamic forms with ng-repeat. I am using the oi-select library for loading my locations. The oi-select box has multi select feature. on my page loading by default, I am loading first option value in that oi-select box.

But I am using a multi select feature if I select any other option than the first option it gets override with that value. Due to this issue, I have to select again that first option. My question is, how can I load my first option value by default into that oi-select?

Afterwards, if I am select any other options it won't override my first value in select box .Here is my plunker link http://plnkr.co/edit/m6Q02dlHLBCMVLRLfioh?p=preview

my HTML code

<body class="container row">
  <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>
                              <oi-select ng-model="user.location" multiple oi-options="v for v in locations" ng-init='initLocation(user)' name="select2" required>
                              </oi-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>
  </div>

my js code

var app = angular.module('myApp', ['ngResource', 'oi.select']);
 app.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) {
          return {
              "userid": user.id,
              "manualcomment": user.comment,
              "location": user.location
          }
      });

      console.log("data", data)
  }

 });

Original Q&A

There are 1 best solutions below

**Stanislav Kvitash** · Answer 1

If you use multiple attribute, this means the model should be an array and not a string as in your case user.location = $scope.locations[0];, ypu have to change it to location: [] and use push() method to add the initial items to this array;
Using $timeout doesn't make any sense to me;
ngInit adds unnecessary amount of logic into the template, I would prefer avoid using it in you case, just use location: [$scope.locations[0]] in your controller.

Working example:

var app = angular.module('myApp', ['ngResource', 'oi.select']);

app.controller('myCtrl', function($scope, $timeout) {
  $scope.ids = [1, 2];
  
  $scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
    
  $scope.users = $scope.ids.map(function(id) {
    return {
      id: id,
      comment: "",
      location: []
    };
  });

  $scope.initLocation = (user, locations) => {
    if (!user.location.length) {
      user.location.push(locations[0]);
    } 
  }
  
  $scope.adduser = function() {
    $scope.users.push({
      id: Math.max(...($scope.users.map(u => { return u.id; }))) + 1,
      comment: "added from controller",
      location: [$scope.locations[2]]
    });
  }

});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//rawgit.com/tamtakoe/oi.select/master/dist/select.css" />
  
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script>
    <script src="//rawgit.com/tamtakoe/oi.select/master/dist/select-tpls.js"></script>
    <script src="script.js"></script>
  </head>

  <body  class="container row">
    <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>

              <oi-select ng-model="user.location" 
              multiple oi-options="v for v in locations" ng-init='initLocation(user, locations)' 
              name="select2" required>

              </oi-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>
  </div>
  </body>

</html>

ng-init value overridden in angular oi-select mutiple options

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in SELECT

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in NG-OPTIONS

Related Questions in ANGULAR-FORMLY

Trending Questions

Popular # Hahtags

Popular Questions