ng-click - Использование функций для значений свойств

Question

Я создаю приложение для калькулятора в AngularJS, но у меня возникают проблемы с ng-repeat и 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()}}" 

Но это кажется ужасной практикой. Есть ли способ улучшить это, поэтому я могу вызвать функцию, основанную на операции?

Answer 1

Наилучшим подходом является назначение реальной функции, а не строкового выражения вызова функции, каждому 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> 

Answer 2

$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; 
.... 
}; 

Answer 3

Вы могли бы возможно, реорганизуйте свой код таким образом. Вы, контроллер, определяете, какие функции добавляются к объекту $ scope.

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

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

В HTML вы могли бы сделать это ссылаться на их таким образом

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