根据示波器数据更改指令模板中的元素

我有一个嵌套在ng-repeat中的指令。 ng-repeat项目被传递给指令。我试图根据传递给指令的项中的键/值生成指令模板（用于测试）或带有可变元素的templateUrl。基本上，如果item.number> 50使按钮红色，否则使它蓝色。根据示波器数据更改指令模板中的元素

我可能会使用错误的工具来解决问题。目标是使用这样的东西来改变Bootstrap标签。例如逻辑：

if item.number > 50: 
    class="btn btn-danger" 
else: 
    class="btn btn-success"

如果可能的话我想用templateUrl来解决这个问题：因为我想的按钮启动自举模式，这是一个很多适应的基本模板选项。传递模板各个作用域变量会更简洁。

这是试图描述问题的JSFiddle。

HTML

<div ng-controller="TableCtrl"> 
    <table> 
    <thead> 
     <tr> 
     <th>#</th> 
     <th>Button</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in buttons"> 
     <td>{{item.id}}</td> 
     <td new-button item='item'></td> 
     </tr> 
    </tbody> 
    </table> 
</div>

app.js

var myApp = angular.module('myApp', []); 

function TableCtrl($scope) { 
    $scope.buttons = { 
    button1: { 
     id: 1, 
     number: '10', 
    }, 
    button2: { 
     id: 2, 
     munber: '85', 
    } 
    }; 
}; 

myApp.directive('newButton', function() { 
    return { 
    restrict: 'A', 
    replace: true, 
    scope: { 
     item: '=', 
    }, 
    link: function(elem, attrs, scope) { 
     // This is most likely not the right location for this 
     /*if (item.number > 50) { 
     button.color = red 
     }, else { 
     button.color = blue 
     }; */ 
    }, 
    template: '<td><button type="button">{{button.color}}</button></td>' 
    } 
});

来源

2016-04-20 davidcapatch

也许你可以使用一个ng-class此：

<button ng-class="{ 
    'btn-danger': item.number > 50, 
    'btn-success': item.number <= 50 
}"></button>

见https://docs.angularjs.org/api/ng/directive/ngClass

来源

2016-04-20 21:09:10 bcherny

你是正确的，NG级工程类部分。我的后续问题是当使用Angular UI Boostrap进度条时，他们将颜色移出类，并使其成为自己的type =“”元素。有没有办法用他们的自定义元素来做类似的逻辑？ – davidcapatch

' 50？'btn-danger' ：'btn-success'}}“>' – bcherny

这就行了！在错过小/简单的事情的文档中迷失方向。非常感谢你。 – davidcapatch

如果你真的需要一个自定义的指令，你可以尝试使用它像这样

link: function(scope,elem,attrs) { var item=scope.item; if (item.number > 50) { elem.addClass("btn-danger"); } else { elem.addClass("btn-success"); } }

但我认为，你想达到最好还是使用ngClass指令如下内容：

<button type="button" item="item" class="btn" ng-class="item.number > 50?'btn-danger':'btn-success'"></button>

来源

2016-04-20 22:15:14

看你的示例代码，有几点需要注意：

错字按钮2的“munber”属性。
链接函数不使用依赖注入，所以参数的顺序很重要。范围需要先移动。
你注释掉了一点代码已经接近工作了，但是你需要解决变量作为范围的属性 - 项目在范围上，并且你创建的按钮对象需要在范围上创建，以便作为“按钮”。从你的视图模板。

这工作（它会更好，正如其他人所说，使用纳克级，而不是阶级加胡子的语法，但我想留接近您的代码示例越好）：

HTML

<div ng-controller="TableCtrl"> 
    <table> 
    <thead> 
     <tr> 
     <th>#</th> 
     <th>Button</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in buttons"> 
     <td>{{item.id}}</td> 
     <td new-button item='item'></td> 
     </tr> 
    </tbody> 
    </table> 
</div>

var myApp = angular.module('myApp', []); 

function TableCtrl($scope) { 
    $scope.buttons = { 
    button1: { 
     id: 1, 
     number: '10', 
    }, 
    button2: { 
     id: 2, 
     number: '85', 
    } 
    }; 
}; 

myApp.directive('newButton', function() { 
    return { 
    restrict: 'A', 
    replace: true, 
    scope: { 
     item: '=', 
    }, 
    link: function(scope, elem, attrs) { 
     scope.button = {}; 
     if (scope.item.number > 50) { 
     scope.button.class = 'btn btn-danger'; 
     } else { 
     scope.button.class = 'btn btn-success'; 
     }; 
    }, 
    template: '<td><button type="button" class="{{button.class}}">Press Me?</button></td>' 
    } 
});

CSS

.btn-danger { 
    background-color: red; 
} 
.btn-success { 
    background-color: green; 
}

Modified JSFiddle

来源

2016-04-21 00:15:34 ImperfectClone

根据示波器数据更改指令模板中的元素

回答

相关问题