2016-09-10 4 views
0

Я использую select2 в своем проекте Angular, на самом деле у меня есть проблема: я понятия не имею, как установить значение по умолчанию для опции select. Вот мой код:Угловая - как инициализировать значение по умолчанию для select2

HTML:

<select-tag-manager parent-id="2" value="restaurant.type" ></select-tag-manager> 

Угловой:

app.directive('selectTagManager', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      parentId: '@', 
      value: '=' 
     }, 
     controller: function($rootScope, $scope, Gateway, toaster, $element, Tags) { 
      var element; 

      $scope.update = function() { 

      }; 

      var makeStandardValue = function(value) { 
       var result = []; 
       angular.forEach(value , function(tag , key) { 
        if(result.indexOf(tag.tagId) < 0) { 
         result.push(tag.tagId); 
        } 
       }); 
       return result; 


      }; 

      var init = function() { 

       Gateway.get('', '/tag?' + 'parentId=' + $scope.parentId, function(response) { 
        $scope.allPossibleTags = response.data.result.tags; 
       }); 

       element = $($element).children().find('select').select2(); 
       console.log(element); 

      }; 

      $scope.$watch('value', function(newval) { 
       if(newval) { 
        $scope.standardValue = []; 

        angular.forEach(newval, function(val, key) { 

         $scope.standardValue.push(val.tagName); 

        }); 
        console.log($scope.standardValue); 
       } 
      }); 



      init(); 
     }, 
     templateUrl: 'selectTagManager.html' 
    } 
}); 

selectTagManager.html:

<div class="row"> 
     <div class="col-md-12"> 
      {{ standardValue }} 
      <select class="select2" multiple="multiple" ng-model="standardValue" ng-change="update()"> 
       <option ng-if="tag.tagId" ng-repeat="tag in allPossibleTags" data-id="{{tag.tagId}}" value="{{tag.tagId}}">{{ tag.tagName }}</option> 
      </select> 
     </div> 
    </div> 

Я получил значение

console.log($scope.standardValue); 

результат: [ "lazzania", "пицца", "кебаб"]

Но я не знаю, как установить их в качестве значения по умолчанию в Select-опции. Любое предложение?

EDITED: Я только отредактировал мой вопрос, используя Angular-ui/ui-select2. Я изменил свой шаблон:

<select ui-select2 = "{ allowClear : true }" ng-model="standardValue" multiple="multiple" > 
     <option value="standardId" ></option> 
     <option ng-repeat="tag in allPossibleTags" value="{{tag.tagId}}">{{tag.tagName}}</option> 
    </select> 

А также мои ЯШ:

 $scope.$watch('value', function(newval) { 
      if(newval) { 
       $scope.standardValue = []; 
       $scope.standardId = []; 
       // $scope.standardValue = makeStandardValue(newval); 
       console.log('----------------------------------------------------------------------'); 

       angular.forEach(newval, function(val, key) { 

        $scope.standardValue.push(val.tagName); 
        $scope.standardId.push(val.tagId); 

       }); 
       console.log($scope.standardValue); 
       console.log($scope.standardId); 
      } 
     }); 

Тем не менее, все же я не могу установить значение по умолчанию.

+0

Что 'allPossibleTags' выглядит? – spongessuck

+0

@spongessuck Это объект, который содержит tagId, tagName. – AFN

+0

Вы должны попытаться перейти на [ui-select] (https://github.com/angular-ui/ui-select), поскольку ui-select2 устарел. – spongessuck

ответ

0

, как организованы показы в http://select2.github.io/examples.html#programmatic, можно установить значения по умолчанию для нескольких элементов ВЫБ.2 следующим образом:

$exampleMulti.val(["CA", "AL"]).trigger("change"); 

так, у вас случай, если вы уже элемент переменной, указывающей на ваш выбор2:

element.val($scope.standardValue).trigger('change'); 

обратите внимание, что это jQuery-подход установки/изменения значений, угловой подход будет состоять в обновлении значений через ng-модель и ее событиях жизненного цикла

+0

Я использую element.val ($ scope.standardValue) .trigger ('change'); и я получаю сообщение об ошибке: Ошибка: $ rootScope: inprog Действие уже начато – AFN

+0

вы можете предоставить плункер с кодом? – Andriy

0

T он Идентификаторы в модели должны соответствовать идентификаторам в источнике данных, так что если ваша модель:

["lazzania", "pizza", "kebab"] 

Тогда allPossibleTags потребности выглядеть следующим образом:

[{ tagId: "lazzania", tagName: "Lazzania" }, { tagId: "pizza" ... 

Заканчивать этот шлепнуть для рабочего примера :

http://plnkr.co/edit/e4kJgrc69u6d3y2CbECp?p=preview

Смежные вопросы