Make an accordion with angularjs/ui-bootstrap an using the ng-model

Question

I use angularJs and bootstrap. I have made an accordion where I have put a select for choose the value of the filter and the data-ng-model which doesn't work (the select works if he is not in an accordion). Here is my code:

<accordion close-others="oneAtATime">
    <accordion-group is-open="isOpen">
        <accordion-heading>
            Country<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
        </accordion-heading>
        <select data-ng-model="country" class="input-medium inputFilter form-control">
            <option value="">All country</option>
            <option value="1">Switzerland</option>
            <option value="2">France</option>
            <option value="3">Spain</option>
        </select>
    </accordion-group>
</accordion>
<div data-ng-repeat="city in listcity |filter:country">
    {{city.name}}, {{city.country}}
</div>

I have look at UI-Bootstrap for the accordion. I thinks I had to do a directive for make it work but the directive doesn't work with the accordion. here is my directive which doesn't work

app.directive('accordion', function () {
return {
    scope: {
        dataNgModel: '=',
    },
  };
});

mainguy · Accepted Answer · 2014-03-31 13:05:39Z

6

I am not sure if this is what you wanted. But i use ng-change to setup the new filter value.

Controller:

function AccordionDemoCtrl($scope) {
  $scope.oneAtATime = true;
  //default: all countrys
  $scope.country = '';
  //example data
  $scope.listcity = [{
    name: 'Madrid',
    country: '3'
  }, {
    name: 'Paris',
    country: '2'
  }, {
    name: 'Lyon',
    country: '2'
  }, {
    name: 'Zurich',
    country: '1'
  }];

  //set a new selection
  $scope.setCountry = function(cid) {
    $scope.country = cid;
  }
}

Markup:

 <select ng-model="country" ng-change="setCountry(country)" class="input-medium inputFilter form-control">

See it working here

Btw: The example directive is the shortest I have ever seen. Ahh, I whish it was that easy:-)

answered Mar 31, 2014 at 13:05

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Laetitia42 Over a year ago

Thanks it's exactly what i was looking for. It was the first time I was trying to do a directive :), I stil have a lot of work to do haha

hussainb Over a year ago

Hello guys, am stuck with an angularjs-accordion problem can you help ? ... Its HERE

Collectives™ on Stack Overflow

Make an accordion with angularjs/ui-bootstrap an using the ng-model

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related