미사토
660
2019-04-01 17:23:26
1
170

버튼을 따로따로 적용하게 할 수 있게 하는 코드좀 짜주실 수 있나요?




제목없는 질문과 구성이라는 것이 +를 누르면 저렇게 반복으로 같이 나와서 그런데 제목없는 질문 따로 구성 따로 하는 코드가 뭔가요?


(html)


<div ng-app="add" ng-controller="ListCtrl">

    <ul class="list-unstyled">

      <li class="list-group" ng-repeat="choice in choices">

       <div class="col-sm-7">

         <textarea id="title2" name="check" form="inform" rows="1%"

           >제목없는 질문</textarea>

         <br>

         <label id= "num1"><input type="radio" style="width:15px;height:15px;" name="num1" value="1" >

           <textarea id="in" name="check" form="inform"style="width:20%" rows="1%">1</textarea><br>

            <input type="radio" style="width:15px;height:15px;" name="num1" value="2" required>

            <textarea id="in" name="check" form="inform"style="width:20%" rows="1%">2</textarea><br>

            <input type="radio" style="width:15px;height:15px;" name="num1" value="3" required>

            <textarea id="in" name="check" form="inform"style="width:20%" rows="1%">3</textarea><br>

            <input type="radio" style="width:15px;height:15px;" name="num1" value="4" required>

            <textarea id="in" name="check" form="inform"style="width:20%" rows="1%">4</textarea><br>

          </label></div>

          <textarea id="title2" name="check" form="inform"style="width:65%" rows="1%"

            >구성</textarea>

           <br>

           <label id="li">

           <strong>나쁨<strong>

             <input type="radio" style="width:15px;height:15px;" name="num1" value="1" >

             <input type="radio" style="width:15px;height:15px;" name="num1" value="2" >

             <input type="radio" style="width:15px;height:15px;" name="num1" value="3" >

             <input type="radio" style="width:15px;height:15px;" name="num1" value="4" >

             <strong>좋음</strong></label>


        <button class="btn btn" ng-click="removebtn(choice.id)" ng-if="choice.id!=index">-</button>

        <button class="btn btn" ng-click="addbtn()" ng-if="choice.id===index">+</button>

        </li>

    </ul>

    <br>

  </div>


(Angularjs)

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


  app.controller('ListCtrl', function($scope) {

    $scope.question = [

    ];


    $scope.choices = [{"id": 1},

                  ];



  $scope.index = $scope.choices.length;


  $scope.addbtn = function() {

    var newItemNo = ++$scope.index;

    $scope.choices.push({'id':newItemNo});


  };


  $scope.removebtn = function(id) {


        if($scope.choices.length<=1){

            alert("더이상 삭제 할 수 없습니다");

            return;

        }



        var index = -1;

    var comArr = eval( $scope.choices );

    for( var i = 0; i < comArr.length; i++ ) {

    if( comArr[i].id === id) {

    index = i;

    break;

    }

    }

    if( index === -1 ) {

    alert( "danger" );

    }

    $scope.choices.splice( index, 1 );

  };


});


0
0
  • 답변 1

  • errthin
    246
    2019-04-01 18:13:31

          <li class="list-group" ng-repeat="choice in choices">

    ng-repeat 이 부분에서 choice in choices로 foreach 연산 해주고 있구요

    choices라는 게 결국 지금 반복적으로 만들어지고 있는 폼들의 집합을 의미합니다.


     


    $scope.addbtn = function() {

        var newItemNo = ++$scope.index;

        $scope.choices.push({'id':newItemNo});


      };

    add버튼을 누르면 choices에 항목을 하나 추가해서 

    choice in choices 해버리면 버튼을 누른 횟수만큼 돌아버리는 거죠



            <button class="btn btn" ng-click="removebtn(choice.id)" ng-if="choice.id!=index">-</button>

            <button class="btn btn" ng-click="addbtn()" ng-if="choice.id===index">+</button>

            </li>


    위에 repeat이 있는 li 부터 밑에 </li>로 닫히는 부분까지 add버튼을 누르면 반복적으로 추가가 되기 때문에 li를 두 개를 두시던지 분리하시면 될 듯 싶습니다


    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.