使用ng-model制作带有angularjs / ui-bootstrap的手风琴

发布时间：2020-12-17 17:40:38 所属栏目：安全来源：网络整理

导读：我使用angularJs和bootstrap.我已经制作了一个手风琴,我在其中选择了过滤器的值和数据-ng-模型不起作用(如果他不是手风琴,则选择有效).这是我的代码： accordion close-others="oneAtATime" accordion-group is-open="isOpen" accordion-heading Countryi cl

我使用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: '=',},};
});

解决方法

我不确定这是不是你想要的.但我使用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',{
    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

顺便说一句：示例指令是我见过的最短的指令.啊,我觉得很容易:-)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!