2015-09-17 44 views
0

我在AngularJS中創建了一個計算器應用程序,但我在ng-repeatng-click中遇到了問題。ng-click - 使用函數獲取屬性值

<div class="col-md-3"> 
    <button ng-repeat="op in operations" name="btn{{ op.name }}" 
      value="{{ op.symbol }}" class="operationbutton" 
      ng-click="{{ op.function }}"> {{ op.symbol }} 
    </button> 
</div> 

在我app.js,我的控制器裏面,我有綁$scope變量的操作。

$scope.operations = [ 
    { "symbol": "+", "name": "add", "function": "add()" }, 
    { "symbol": "-", "name": "subtract", "function": "subtract()" }, 
    { "symbol": "*", "name": "multiply", "function": "multiply()" }, 
    { "symbol": "/", "name": "divide", "function": "divide()" } 
]; 

我試着把引號從函數名中除去,但事實證明,JavaScript對象值必須包含字符串。

我可以做這樣的事情

ng-click="{{ op.name === 'add' ? add() : op.name === 'subtract' ? subtract() 
: op.name === 'multiply' ? multiply() : op.name === 'divide' ? divide() : multiply()}}" 

但是,這似乎是一個可怕的做法。有什麼辦法可以改進這個,所以我可以根據操作調用一個函數?

+1

您不能分配的實際功能'op.function'而一些字符串表達式的HTML? –

+0

使用switch語句爲每個符號創建單個函數,將該函數賦值給ng-click(不帶任何符號)。最後,爲了使它工作,你必須創建另一個名爲op_symbol的變量,或類似的東西,並在你的方法中使用它。 另外我建議閱讀關於bindToController/controllerAs語法。這在控制器中使用$ scope會下降,因爲您可以將vars,函數分配給控制器的函數 - 測試此類控制器會更容易。 – kornicameister

回答

4

最好的辦法是分配的實際功能,而不是函數調用的一個字符串表達式,每個op

function add(){ 
    // whatever you do now 
} 

// same for other functions 
function subtract(){} 
function multiply(){} 
function divide(){} 

$scope.operations = [ 
    { "symbol": "+", "name": "add", "function": add }, 
    { "symbol": "-", "name": "subtract", "function": subtract }, 
    { "symbol": "*", "name": "multiply", "function": multiply }, 
    { "symbol": "/", "name": "divide", "function": divide } 
]; 

而且ng-click變爲:

<button ng-repeat="op in operations" 
     ng-click="op.function()"> 
    {{ op.symbol }} 
</button> 
+1

打我1秒鐘的答案。不過,這是一個演示。 http://jsbin.com/fiveduxeye/2/edit?html,js,output – m59

0
$scope.operations = [ 
    { "symbol": "+", "name": "add"}, 
    { "symbol": "-", "name": "subtract"}, 
    { "symbol": "*", "name": "multiply"}, 
    { "symbol": "/", "name": "divide"} 
]; 

<div class="col-md-3"> 
    <button ng-repeat="op in operations" name="btn{{ op.name }}" 
      value="{{ op.symbol }}" class="operationbutton" 
      ng-click="op.Operationfunction(op.name)"> {{ op.symbol }} 
    </button> 
</div> 

$scope.Operationfunction = function(operation){ 
switch(operation) 
case 'add': 
    add(); 
    break; 
case 'multiply': 
    multiply(); 
    break; 
.... 
}; 
1

你可以可能以這種方式重組您的代碼。你控制器你會定義你的函數添加到$ scope對象。

var add = function() { 
//code here 
}  

var subtract = function() { 
//coder her 
}  
$scope.operations= [ 
    { "name" : "add", "func" : add}, 
    { "name" : "subtract", "func" : subtract}, 
    ] 

在你這樣做參考他們這樣

<div class="col-md-3"> 
    <button ng-repeat="op in operations" ng-click="op.func()"> {{ op.symbol }} 
    </button> 
    </div> 
+1

要挑剔,沒有必要在'$ scope'上設置函數本身# –

+1

謝謝!我試過了範圍,但忘了在'ng-click'中調用函數。我有'op.function'而不是'op.function()' –

+0

@NewDev你是對的。我只是打了很快。感謝您的更正。 – inspired