按钮onclick使用AngularJS

时间:2018-04-09 11:09:27

标签: angularjs typescript

我需要在我的表单中添加一个按钮,如果我单击该按钮,它应该显示一个文本区域和一个提交按钮,因此在键入任何文本后我将单击提交按钮它应该使用AngularJS在我的表单中打印复选框。 enter image description here

与上面的照片相同。我是打字稿的新手,所以请帮我解决这个问题

2 个答案:

答案 0 :(得分:1)

使用ngClick指令:

<button ng-click="yourFunction()">OK</button>

https://docs.angularjs.org/api/ngTouch/directive/ngClick

此外,在您提出这样一个基本问题之前,请先阅读文档或教程/示例......

答案 1 :(得分:0)

<div data-ng-controller="homeController">
    <div class="col-lg-1">
        <span class="glyphicon glyphicon-plus-sign" style="cursor:hand" aria-hidden="true" title="Add More" ng-click="onEnable()"></span>
    </div>
    <div class="col-lg-5">
        <input type="text" ng-if="isEnableTextBox" ng-model="model.label" name="dynamic" class="form-control">
    </div>
    <div class="col-lg-5">
        <button type="button" class="btn btn-primary" ng-disabled="!model.label" ng-click="onAddCheckBox()">Submit</button>
    </div>
    <div class="col-lg-12">
        <div class="checkbox col-lg-12" ng-repeat="checkBox in checkBoxes track by $index">
            <input type="checkbox" name="name_{{$index}}" id="name_{{$index}}" ng-model="checkBox.selectedCheckBox" class="filled-in square chk-col-pink ng-pristine ng-untouched ng-valid ng-empty" checked="checked" aria-invalid="false">
            <label for="checkBox.label">{{checkBox.label}}</label>
        </div>
    </div>
</div>

function init() {
    $scope.isEnableTextBox = false;
    $scope.checkBoxes = [];
    $scope.model = {};
}

$scope.onEnable = function onEnable() {
    $scope.isEnableTextBox = true; // Enable text box on Click Plus Icon
};

$scope.onAddCheckBox = function onAddCheckBox() { // On submit button click push the given name into array and empty the text box. Please refer the attached image.
    var _checkBoxModel = angular.copy($scope.model.label);
    $scope.model.label = "";
    $scope.checkBoxes.push({'label': _checkBoxModel, 'selectedCheckBox': true});
};

init();

Sample Image