只顯示來自多個NG-click事件點擊的元素值angularjs

-1

我有10多個NG-click事件，但我想告訴我哪裏有隻更改點擊的元素值，但我在代碼更新，有那麼多的真或假的重複我必須寫，請幫助我必須顯示只點擊ng顯示值，而不使用每個點擊事件中的'true或false'booleen函數。只顯示來自多個NG-click事件點擊的元素值angularjs

var app = angular.module('myapp', ['ngSanitize']); 
 

 
app.controller('AddCtrl', function ($scope, $compile) { 
 

 
    $scope.field = {single: 'untitled',single2:'default',single3:'enter'}; 
 

 
    $scope.addName1 = function (index) { 
 
     var name1html = '<fieldset id="name1" ng-click="selectName1($index)"><label ng-bind-html="field.single"></label><input type="text" placeholder="Enter name"><button ng-click="removeName1($index)">-</button></fieldset>'; 
 
     var name1 = $compile(name1html)($scope); 
 
     angular.element(document.getElementById('drop')).append(name1); 
 
    }; 
 
    $scope.removeName1 = function (index) { 
 
     var myEl = angular.element(document.querySelector('#name1')); 
 
     myEl.remove(); 
 
    }; 
 
    $scope.selectName1 = function (index) { 
 
     $scope.showName1 = true; 
 
     $scope.showName2 = false; 
 
     $scope.showName3 = false; 
 
    }; 
 
    
 
    $scope.addName2 = function (index) { 
 
     var name2html = '<fieldset id="name2" ng-click="selectName2($index)"><label ng-bind-html="field.single2"></label><input type="text" placeholder="Enter name"><button ng-click="removeName2($index)">-</button></fieldset>'; 
 
     var name2 = $compile(name2html)($scope); 
 
     angular.element(document.getElementById('drop')).append(name2); 
 
    }; 
 
    $scope.removeName2 = function (index) { 
 
     var myEl = angular.element(document.querySelector('#name2')); 
 
     myEl.remove(); 
 
    }; 
 
    $scope.selectName2 = function (index) { 
 
     $scope.showName2 = true; 
 
     $scope.showName1 = false; 
 
     $scope.showName3 = false; 
 
    }; 
 
    
 
    $scope.addName3 = function (index) { 
 
     var name3html = '<fieldset id="name3" ng-click="selectName3($index)"><label ng-bind-html="field.single3"></label><input type="text" placeholder="Enter name"><button ng-click="removeName3($index)">-</button></fieldset>'; 
 
     var name3 = $compile(name3html)($scope); 
 
     angular.element(document.getElementById('drop')).append(name3); 
 
    }; 
 
    $scope.removeName3 = function (index) { 
 
     var myEl = angular.element(document.querySelector('#name3')); 
 
     myEl.remove(); 
 
    }; 
 
    $scope.selectName3 = function (index) { 
 
     $scope.showName3 = true; 
 
     $scope.showName1 = false; 
 
     $scope.showName2 = false; 
 

 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="myapp"> 
 

 
<head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script> 
 
\t <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script> 
 

 
\t </head> 
 

 
<body ng-controller="AddCtrl"> 
 
\t <div id="drop"></div> 
 

 
\t <button ng-click="addName1($index)">Name1</button> 
 
\t \t <button ng-click="addName2($index)">Name2</button> 
 
\t <button ng-click="addName3($index)">Name3</button> 
 
\t 
 
\t \t <form ng-show="showName1"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label>Field Label(?)</label> 
 
\t \t \t <br/> 
 
\t \t \t <input ng-model="field.single"> 
 
\t \t </div> 
 
\t </form> 
 
\t \t <form ng-show="showName2"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label>Field Label(?)</label> 
 
\t \t \t <br/> 
 
\t \t \t <input ng-model="field.single2"> 
 
\t \t </div> 
 
\t </form> 
 
\t \t \t <form ng-show="showName3"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label>Field Label(?)</label> 
 
\t \t \t <br/> 
 
\t \t \t <input ng-model="field.single3"> 
 
\t \t </div> 
 
\t </form> 
 

 
</body> 
 

 
</html>

這裏是plunkr http://plnkr.co/edit/oFytWlQMIaCaeakHNk71?p=preview

來源

2015-12-21 Vijju Sena