Set the Width of Select2 Input (Through Angular-Ui Directive)

set the width of select2 input (through Angular-ui directive)

You need to specify the attribute width to resolve in order to preserve element width

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

Setting initial values of Angular-UI Select2 multiple directive

As requested by ProLoser here is a demo and github ticket.

Demo: http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

GitHub Issue: https://github.com/angular-ui/angular-ui/issues/455

Following ProLoser's advice I started using select2's initSelection function:

initSelection : function (element, callback) {
  callback($(element).data('$ngModelController').$modelValue);
},

It does the trick but still feels like a workaround.

Angular Directive that adds select2 corrupts model?

Looking at the Angular guide for IE8, its not completely supported. That said, there is one thing you can try to resolve this which is change your

<body ng-app="app" ng-controller="TestController">

<body ng-app="app" id="ng-app" ng-controller="TestController">

and add the angular namespace to the top of your pages.

<html xmlns:ng="http://angularjs.org">

You can look it up here.

EDIT: For future refrence, codenewbie has the solution to the Array.prototype.Foreach issue below. Be sure to read that if you're having that issue.

Two way databinding in Select2 for AngularJS doesn't work in angular 1.2.13

I have not used select2 plugin, but it seems like with your angular update, your select2 directive's priority needs to be higher than ng-model'priority which is 0, so i just provided a priority 1 for the directive and it works now.

In the ui-select2 change:-

angular.module('ui.directives').directive('uiSelect2', ['ui.config', '$timeout', function (uiConfig, $timeout) {
  var options = {};
  if (uiConfig.select2) {
    angular.extend(options, uiConfig.select2);
  }
  return {
    require: '?ngModel',
    priority: 1,  //<--- Here

Demo

And if you really don't want to touch the plugin source (which i would recommend for any later upgrades), in your app just set the priority as configuration, and remove it once you get a working version of this directive. Also verify if they have a newer version where it has been fixed.

   //Remove later once plugin is fixed
   app.config(function($provide){
      return $provide.decorator('uiSelect2Directive', ['$delegate', function($delegate) {
        $delegate[0].priority = 1; //Just set the priority
        return $delegate;
    }])});

Demo

Width of select2 input is getting smaller when bootstrap panel is open by default

You can easily solve this using the width option of the plugin, in this particular case using width: "100%" will fix it, like this:

$('.js-example-basic-single').select2({
    placeholder: "Select...",
    allowClear: true,
    width: "100%"
});

Check the working example:

$('.js-example-basic-single').select2({

  placeholder: "Select...",

  allowClear: true,

  width: "100%"

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />

<div class="container-fluid">

  <div class="row">  

    <div class="col-xs-10">

      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">

          <div class="panel-heading" role="tab" id="headingOne">

            <h4 class="panel-title">

              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                <i class="fa fa-plus mright-1"></i> closed by default

              </a>

            </h4>

          </div>

          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

            <div class="panel-body">

              <form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">

                <fieldset>

                  <div class="form-group">

                    <label for="inputName" class="col-xs-2 control-label">Status</label>

                    <div class="col-xs-10">

                      <select name="action" class="js-example-basic-single js-states form-control" required>

                        <option></option>

                        <option value="toPrepare">Prepare</option>

                        <option value="toProduction">Produce</option>

                      </select>

                    </div>

                  </div>

                  <div class="form-group">

                    <label for="inputName" class="col-xs-2 control-label">Notes</label>

                    <div class="col-xs-10">

                      <textarea class="form-control" name="comments" rows="3" /></textarea>

                    </div>

                  </div>

                  <div class="col-xs-2">

                    <button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>

                  </div>

                </fieldset>

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

<div class="container-fluid">

  <div class="row">

    <div class="col-xs-10">

      <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">

          <div class="panel-heading" role="tab" id="headingOne">

            <h4 class="panel-title">

              <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">

                <i class="fa fa-plus mright-1"></i> open by default

              </a>

            </h4>

          </div>

          <div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

            <div class="panel-body">

              <form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">

                <fieldset>

                  <div class="form-group">

                    <label for="inputName" class="col-xs-2 control-label">Status</label>

                    <div class="col-xs-10">

                      <select name="action" class="js-example-basic-single js-states form-control" required>

                        <option></option>

                        <option value="toPrepare">Prepare</option>

                        <option value="toProduction">Produce</option>

                      </select>

                    </div>

                  </div>

                  <div class="form-group">

                    <label for="inputName" class="col-xs-2 control-label">Notes</label>

                    <div class="col-xs-10">

                      <textarea class="form-control" name="comments" rows="3" /></textarea>

                    </div>

                  </div>

                  <div class="col-xs-2">

                    <button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>

                  </div>

                </fieldset>

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

ui-select2 inside directive bind to outer scope

I found the problem, and it's not that hard.
when creating isolated scope, you can not just bind to the parent scope, if doens angular will create a separate instance of the variable.
just need to bind to $parent, or to and parent object:

scope: {
      option: '='
    }

and in the template:

template: '<input ng-if="option.type === 1" ui-select2="textChoices" ' +
                'ng-model="option.selections" style="width:200px" />' +
                '<input ng-if="option.type === 2" ui-select2="colorChoices" ' +
                'ng-model="option.selections" style="width:200px" />' + 
                '{{\'inner:\' + selections}}',

njoy!

Angular ui-select2 directive doesn't work with AngularJS Validation

I believe there's a problem in how select2 directive is passing the value between the ngModel and select2 plugin.

In short, when there are no tags selected, the UI's select2 directive will set the model to [] (empty array), because that's the default value returned by the select2 plugin on empty multi-select inputs (See the docs for select2 Data method)

I'll post an issue on Github to confirm this, but in the meantime here's a workaround:

function Ctrl($scope) {
  $scope.userType = null;
  $scope.version1 = {
      tags : null
  };

  $scope.$watch('userType', function(userType){
    if(angular.isArray(userType) && userType.length === 0){
      $scope.userType = '';
    }
  });
}

Or you could use this custom 'required-multiple' directive which will take empty array into consideration when validating the model:

app.directive('requiredMultiple', function() {
  function isEmpty(value) {
    return angular.isUndefined(value) || (angular.isArray(value) && value.length === 0) || value === '' || value === null || value !== value;
  }

  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) return;
      attr.required = true; // force truthy in case we are on non input element

      var validator = function(value) {
        if (attr.required && (isEmpty(value) || value === false)) {
          ctrl.$setValidity('required', false);
          return;
        } else {
          ctrl.$setValidity('required', true);
          return value;
        }
      };

      ctrl.$formatters.push(validator);
      ctrl.$parsers.unshift(validator);

      attr.$observe('required', function() {
        validator(ctrl.$viewValue);
      });
    }
  };
});

Set the Width of Select2 Input (Through Angular-Ui Directive)