Javascript Question

ng-repeat: How to set property multiple in select

I have object (arr) when repeat, he have property

charType
:
select
or
multiple
.

I want if
charType
is
"select"
see normal select, but if
charType
is
"multiple"
see select with multiple.

Example:

If object (arr) have 5 result 0,1,2 is
charType
'select' and 3,4
charType
is 'multiple'.I want to see
0 select
1 select
2 select
3 select with multiple
4 select with multiple



<div class="form-group" ng-repeat="att in arr track by $index">
<div class="col-md-3">
<label for="phone" ng-model="type">{{att.name}}</label>
</div>
<div class="col-md-9">
({{att.charType}})
<select class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]" ng-if="att.charType == 'select' ? 'multiple' : 'multiple=true'">
<option ng-repeat="itemss in att.value track by $index" value="{{itemss}}">{{itemss}}</option>
</select>
<div class="text-center"><a class="insertStore" data-toggle="modal" data-target="#addCharacteristicValue" ng-click="getObj(att)">Добави</a>
</div>

</div>
</div>




Answer

Here is a working snippet :

  • Use ng-options instead of ng-repeat in option tag
  • Remove track by index make select fail
  • Use a simple ng-if to generate two differents select.

There isn't ng-multiple directive it seems, so i went for the ng-if workaround.

angular.module("app", []).controller("ctrl", function($scope){
    $scope.arr = [{charType:'select', name:'select', value:[1, 2]},{charType:'multiple', name:'multiple', value:[1,2]}]; 
    $scope.charObj = {characterValue:{}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="app" ng-controller="ctrl">
    <div class="form-group" ng-repeat="att in arr track by $index">
      <div class="col-md-3">
        <label for="phone" ng-model="type">{{att.name}}</label>
      </div>
      <div class="col-md-9">
        ({{att.charType}})
        <select ng-if="att.charType == 'select'" class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]"  ng-options="itemss for itemss in att.value">
        </select>
                <select ng-if="att.charType != 'select'" multiple class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]"  ng-options="itemss for itemss in att.value">
        </select>
      
      </div>
    </div>
    selected : {{charObj.charactValue}} <br />
</div>