根據示波器數據更改指令模板中的元素

我有一個嵌套在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

根據示波器數據更改指令模板中的元素

回答

相關問題