制作与angularjs手风琴/ UI自举一个使用NG-模型 [英] Make an accordion with angularjs/ui-bootstrap an using the ng-model

问题描述

我用angularJs和引导。我已经在那里我已经把选择的选择过滤器和（如果他是不是在手风琴选择作品）不工作数据NG-模式的价值手风琴。这里是我的code：

 ＆LT;手风琴近他人=oneAtATime＆GT;
    ＆LT;手风琴组开=isOpen会＆GT;
        ＆LT;手风琴标题＆GT;
            国家＆LT; I类=右拉glyphiconNG-CLASS ={'glyphicon雪佛龙下：isOpen会，glyphicon  - 雪佛龙权！isOpen会}＆GT;＆LT; / I＆GT;
        ＆LT; /手风琴标题＆GT;
        ＆LT;选择数据-NG-模式=国家级=输入中输入过滤器的形式控制＆GT;
            ＆LT;期权价值=＆GT;所有国家＆LT; /选项＆GT;
            ＆LT;期权价值=1＆GT;瑞士＆LT; /选项＆GT;
            ＆LT;期权价值=2＆GT;法国＆LT; /选项＆GT;
            ＆LT;期权价值=3＆GT;西班牙＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
    ＆LT; /手风琴组＆gt;
＆LT; /手风琴与GT;
＆LT; D​​IV数据-NG-重复=全城listcity |过滤：国家＆GT;
    {{city.name}}，{{city.country}}
＆LT; / DIV＆GT;
 

我看看UI的引导手风琴。我认为我必须做一个指令来让它工作，但该指令不与手风琴工作。这里是我的指令，它不能正常工作

  app.directive（'手风琴'，函数（）{
返回{
    范围： {
        dataNgModel：'='，
    }，
  };
}）;
 

解决方案

我不知道这是否是你想要的。但我用NG-变化设置新的过滤器值。

控制器：

 函数AccordionDemoCtrl（$范围）{
  $ scope.oneAtATime =真;
  //默认情况：全国所有
  $ scope.country ='';
  //示例数据
  $ scope.listcity = [{
    名称：马德里，
    国家：'3'
  }，{
    名称：'巴黎'，
    国家：'2'
  }，{
    名称：里昂，
    国家：'2'
  }，{
    名称：苏黎世，
    国家：'1'
  }];  //设置一个新的选择
  $ scope.setCountry =功能（CID）{
    $ scope.country = CID;
  }
}
 

标记：

 ＆LT;选择NG模型=国NG-变化=setCountry（国家）级=输入中输入过滤器的形式控制＆GT;
 

请参阅它的工作这里

BTW：这个例子指令是我所见过的最短的。啊，我哗哗它是那么容易： - ）

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

解决方案

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

这篇关于制作与angularjs手风琴/ UI自举一个使用NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！