在ng-click上创建动态功能

时间:2015-05-15 05:23:01

标签: angularjs

我有这样的按钮

<button ng-click="method = 'create'; title = 'Create'>create</button>
<button ng-click="method = 'update'; title = 'Update'>update</button>

和这个

<button ng-click="create(param)">{{ title }}</button>
<button ng-click="update(param)">{{ title }}</button>

上面的代码运行正常,但我想让它变得动态。

所以我改变它就像下面一样。

<button ng-click="{{ method }}(param)">{{ title }}</button>

这不起作用,我不知道为什么,虽然如果我检查元素,上面的代码生成纠正代码,如前所述。

3 个答案:

答案 0 :(得分:27)

使用bracket notation

<button ng-click="this[method](param)">{{ title }}</button>

this指向当前范围对象,因此使用this[method]可以通过变量名访问方法。

答案 1 :(得分:2)

这对我不起..和..

我不想在我的角度应用程序,指令或eval的使用中处理html代码。所以我把现有的函数包装在一个函数中:

$scope.get_results = function(){

    return {
            message: "A message", 
            choice1: {message:"choice 1 message", f: function(){$scope.alreadyDefinedFunction1()}},
            choice2: {message:"choice 2 message", f: function(){$scope.alreadyDefinedFunction2()}},
        };
}

在另一个函数中:

$scope.results2 = $scope.get_results();

在html中使用的片段:

<ul class="dropdown-menu scroll-div">
  <li><a ng-click="results2.choice1.f()">{{results_2_menu.choice1.message}}</a></li>
  <li><a ng-click="results2.choice2.f()">{{results_2_menu.choice2.message}}</a></li>
</ul>

基于这个js小提琴:http://jsfiddle.net/cdaringe/FNky4/1/

答案 2 :(得分:1)

这种语法似乎运作良好

<button ng-click="this[method(param)]">{{ title }}</button>

从用户dfsq的建议开始,并且由于建议不使用angularjs 1.6.4,我将关闭的braket放在param值之后。