Question

我还有10个ng-click事件，但我想只显示我必须更改的点击元素值，但是我在代码中更新了我必须写的那么多真假复制品，请帮助我仅显示单击的ng-show值，而不在每次单击事件中使用“true或false”booleen函数。

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>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
	<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>

	</head>

<body ng-controller="AddCtrl">
	<div id="drop"></div>

	<button ng-click="addName1($index)">Name1</button>
		<button ng-click="addName2($index)">Name2</button>
	<button ng-click="addName3($index)">Name3</button>
	
		<form ng-show="showName1">
		<div class="form-group">
			<label>Field Label(?)</label>
			<br/>
			<input ng-model="field.single">
		</div>
	</form>
		<form ng-show="showName2">
		<div class="form-group">
			<label>Field Label(?)</label>
			<br/>
			<input ng-model="field.single2">
		</div>
	</form>
			<form ng-show="showName3">
		<div class="form-group">
			<label>Field Label(?)</label>
			<br/>
			<input ng-model="field.single3">
		</div>
	</form>

</body>

</html>

这里是plunkr http://plnkr.co/edit/oFytWlQMIaCaeakHNk71?p=preview

Answer 1

你需要＆＃34; ng-repeat＆＃34;在HTML中。在$ scope上设置一个Array，让模板确定要添加的HTML元素。通常，$ index仅由ng-repeat设置。

在此处阅读更多内容：https://docs.angularjs.org/api/ng/directive/ngRepeat

仅显示多个ng-click事件angularjs中单击的元素值

1 个答案: