使用ng-model製作angularjs/ui-bootstrap的手風琴

Question

我使用angularJs和bootstrap。我已經做了一個手風琴，我已經選擇了篩選器的值和不起作用的數據ng模型（如果他不在手風琴中，選擇會起作用）。這裏是我的代碼：

<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> 

我看看UI-Bootstrap的手風琴。我認爲我必須做一個指令讓它工作，但指令不適用於手風琴。這是我的指令，不起作用

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

Answer 1

我不知道這是你想要的。但我使用ng-change來設置新的過濾器值。

控制器：

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; 
    } 
} 

標記：

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

看到它的工作here

順便說一句：這個例子指令是我所見過的最短的。啊，我很高興這麼容易:-)