我有一个嵌套在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>'
}
});
你是正确的,NG级工程类部分。我的后续问题是当使用Angular UI Boostrap进度条时,他们将颜色移出类,并使其成为自己的type =“”元素。有没有办法用他们的自定义元素来做类似的逻辑? uib-progressbar> –
davidcapatch
' 50?'btn-danger' :'btn-success'}}“> uib-progressbar>' –
bcherny
这就行了!在错过小/简单的事情的文档中迷失方向。非常感谢你。 – davidcapatch