radioButton list

时间:2015-08-05 08:15:26

标签: angularjs angular-directive

我有一个名为的对象列表:' program',

每个节目都有' Min'和' Max'特性

重复此列表,为所有程序创建一个radioButtons列表,

但是 - 如果某些数字输入不在min和

之间,我不想显示程序

此程序的最大值。所以我发送函数来检查程序是否启用:

  <div ng-repeat="p in programs" >
    <div  ng-if="ifEnable(p)">
        <input  type="radio" >
        <label for="{{program.ID}}">{{p.Name}} </label>
    </div>
   </div>

有效。但我想这样做 - 如果只启用一个程序,我想在页面的另一个地方而不是收音机列表中显示该程序。

这是plunker - 如果您输入&#39; 4&#39;在输入中你看到只有一个程序显示在列表中,所以我想在另一个地方显示它并且不显示无线电列表

1 个答案:

答案 0 :(得分:0)

使用列表中的过滤器可以更简单:

请参阅此plunker

过滤器:

app.filter('inRange', function() {
  return function(programs, value) {
    var finalList = [];
    angular.forEach(programs, function(program){
      if (value <= program.Max && value >= program.Min){
        console.log("true !");
        finalList.push(program);
      }
    })
    return finalList;
  };
});

使用:

programs | inRange : num

现在是单个程序的逻辑

底部ng-repeat如下所示:

 <div ng-show="(programs | inRange : num).length > 1" ng-repeat="p in programs | inRange : num" >
    <input  type="radio" >
    <label for="{{program.ID}}">{{p.Name}} - min: {{p.Min}} - max: {{p.Max}}</label>
 </div>

我在顶部添加了另一个不同的条件:

<h1>
  <div ng-show="(programs | inRange : num).length === 1" ng-repeat="p in programs | inRange : num" >
    <input  type="radio" >
    <label for="{{program.ID}}">{{p.Name}} - min: {{p.Min}} - max: {{p.Max}}</label>
  </div>
</h1>

希望它有所帮助。