使用evel进行ng-click的动态加载功能

时间:2016-09-06 18:26:59

标签: angularjs json angularjs-ng-click

你会在这里找到掠夺:plunker

用户界面如下:http://i.stack.imgur.com/7H1b3.png

我有ng-repeat,我想在指令模板中创建ng-click。 模板名称为mainTemplate.html,其代码如下代码:

<form class="class">
  <p>Inside directive</p>

<div ng-repeat='mainJson in mainJsonData'>
    <div class="{{mainJson.divClass}}">
        <input ng-model="mainJson[mainJson.inputNgModel]" type="{{mainJson.inputType}}" class="{{mainJson.inputClass}}" placeholder="{{mainJson.placeHolder}}" maxlength='{{mainJson.inputMaxLength}}' value="{{mainJson.value}}" ng-click="mainJson[mainJson.ngClick]()"/>
        </div>
    </div>   
</div>
</form>   

指令:

add.directive('testData', function() {
return {
    templateUrl: 'template/mainTemplate.html',
    controller: function($scope, $http) {
        $http.get('json/mainUi.json').success(function(response) {
            $scope.mainJsonData = response;
        });
    }
 };
});

json和我正在尝试创建指令:

[
{
 "divClass":"form-group",
 "inputType":"text",
 "inputClass":"form-control",
 "inputNgModel":"mobile",
 "inputMaxLength":"10",
 "placeHolder":"mobile"
},
{   
 "divClass":"form-group",
 "inputType":"button",
 "inputClass":"btn btn-success",
 "ngClick":"addData",
 "value":"Save",
 "ngClickData":"name, city, mobile"
}
]

我正在寻找ng-click:

ng-click="addData(name, city, mobile)

应该与ng-model一起使用,因为ng-model也可以从

创建

1 个答案:

答案 0 :(得分:0)

您可以将字符串拆分为数组。

例如:https://plnkr.co/edit/6RHVKKhWQC4r3JsBAPEJ?p=preview

我对您所拥有的内容进行了硬编码,并将/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home/bin/javac MyClass.java作为name|city|mobile。{/ p>

<强>更新

它的作品,但是如果你做得好的话,那就是笨蛋,这将是非常困难的。

基于您的工作版本:https://plnkr.co/edit/opDKuIYkDmmR7Nk4xZeP?p=preview