用于radioButton列表的Angular指令

Question

我有一个对象列表，名为" programs "，

每个程序都有'Min'和'Max'属性

在此列表中重复创建所有程序的单选按钮列表，

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

之间，我不想显示程序

max这个程序。所以我发送到函数来检查程序是否启用:

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

它的工作原理。但是我想这样做——如果只有一个节目是启用的，我想在页面的另一个地方显示这个节目，而不是广播列表。

这里是柱塞-如果你输入'4'，你会看到只有一个节目显示在列表中，所以我想把它显示在另一个地方，不显示电台列表

Answer 1

在列表中使用过滤器使操作更简单:

看到它在这个活塞上工作

过滤器:

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>

希望有帮助。