CODEWITHSUNDEEP
htmlangularjs
bhaskar das
bhaskar das

Reputation: 195

My Radio button doesn't work properly in angularJS

I am new to angular and working on small code where I am trying to work on the functionality:- 1. where depending on users choice whether they want to add additional details they can select they can click on yes or no (radio button) 2. When they click on yes the form should display empty text field for input data. 3. Button is there to add or remove the additional text field as and when required.

I am facing the issue that when I try to toggle between yes and no every time the more text fields are getting created which should not happen and should happen only when buttons for addition should be clicked. When I disable the ng-repeat functionality it no more shows the additional text fields upon toggling between yes and no radio buttons but the buttons to add or remove the fields do not work either. I am clueless where I am doing the mistake.

my index.html file

  

  var app = angular.module("myWorld", []);
app.controller('msCtrl', myWorldMain);

function myWorldMain() {
    $scope.worldClicked = function() {			
        
                    if(angular.isUndefined($scope.peopleList)){
                        $scope.peopleList = [];
                    }
                    $scope.addPeopleRow();
                }

                $scope.addPeopleRow = function(){
			// maximum is 20(0-19)
			if (0 <= $scope.peopleList.length && $scope.peopleList.length < 20) {
				$scope.peopleList.push({"checkBox":false,"customerid":"","organizationname":""});
				
//					
			} else {
				var msg = {error: $window.getCurrentContext().translateItemInstant("MyVar")};
				alert(msg.error);
			}
        }
        
        $scope.removePeopleRow = function(){
			var len=$scope.peopleList.length;
			var selectedRecords=[];

			for(var i=0; i<len; i++){
				if($scope.peopleList[i].checkBox){
					selectedRecords.push($scope.peopleList[i]);
				}
			}

			if(selectedRecords.length > 0){
				for(j=$scope.peopleList.length-1; j>=0; j--){
					if($scope.peopleList[j].checkBox){
						$scope.peopleList.splice(j,1);
					}
				}				
			} else {
				var msg = {error: $window.getCurrentContext().translateItemInstant($translate,"MyMesg)};
				alert(msg.error);
				return;
			}
		}

        
    }
    
}
<!DOCTYPE html>
<html data-ng-app="myWorld">
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>


</head>
<body ng-controller="msCtrl as moctrl">
        <div>
                <fieldset>
                    
                        <span>
                         <input type="radio" data-ng-model="msCtrl.radio" title="My World" value="Y" data-ng-click="worldClicked()" id="myWorldradioYes"><label  for="myWorldradioYes"> Yes</label> 
                         <input type="radio" data-ng-model="msCtrl.radio" value="N" id="myWorldradioNo"><label  for="myWorldradioYes">No</label>
                     </span>
                 </fieldset>
            <br />
            <div data-ng-if="myWorld.radio == 'Y'">
                <table  >
                    <thead>
                        <tr>
                            <th id="CheckBox" width="5%"></th>
                            <th id="custNumber" width="35%" translate="CustId"></th>
                            <th id="custLocation" width="60%" translate="Name_of_Organization"></th>
                        </tr>
                    </thead>
    
                    <tr data-ng-repeat="x in myWorldList">
                        <td align="left"><input type="checkbox" data-ng-model="x.checkBox" name="x.checkBox" value="x.checkBox"></td>
                        <td align="left"><label for="xcustid"/><input id="xcustid" type="text" name="x.custid" value="x.cusid" data-ng-model="x.cusid" maxlength="8" ng-class="x.custid.length>0 ? 'input-control focusedBlue':'input-control focusedRed'" required></td>
                        <td align="left"><label for="xorganizationname"/><input id="xorganizationname" name="x.organizationname" value="x.organizationname" type="text" size="50" data-ng-model="x.organizationname" maxlength="50" ng-class="x.organizationname.length>0 ? 'input-control focusedBlue':'input-control focusedRed'" required></td>
                        
                    </tr>
                    <br/>
                </table>
                <div  align="left" style="padding-left:25px">
                      	
                            <button type="button" value="button" class="btn btn-success btn-s" href="JavaScript:void(0)" data-ng-click="addPeopleRow()">
                                           <svg class="icon icon-circle-with-plus"><title>New party</title><use xlink:href="#icon-circle-with-plus"></use></svg>
                                           <strong translate="New_Party"></strong>					
                           </button> 
                           
                           
               
                           <button type="button" value="button" class="btn btn-danger btn-s" href="JavaScript:void(0)" data-ng-click="removePeoplepRow()">
                                           <svg class="icon icon-bin"><title>Remove party</title><use xlink:href="#icon-bin"></use></svg>
                                           <strong translate="Remove_Party"></strong>					
                           </button>
                       <br /> <br />
                   </div>
                </div>
                </div>



</body>




</html>

Upvotes: 0

Views: 238

Answers (1)

sTx
sTx

Reputation: 1261

$scope.worldClicked = function() {          

   if(angular.isUndefined($scope.peopleList)){
      $scope.peopleList = [];// $scope.peopleList.length is 0 here
   }
   if(!$scope.peopleList.length){// $scope.peopleList.length === 0
           $scope.addPeopleRow();//add only one time
        }
}

Upvotes: 1

Related Questions