Question

我是角色的新手，在处理小型代码时，我正在尝试使用这些功能： - 1.根据用户的选择，他们是否想要添加他们可以选择的其他详细信息，他们可以点击是或否（单选按钮） 2.当他们点击“是”时，表单应显示输入数据的空文本字段。 3.按钮用于在需要时添加或删除附加文本字段。

我面临的问题是，当我尝试在yes和no之间切换时，每次创建的文本字段越多，这应该不会发生，并且只有在应该单击添加按钮时才会发生。当我禁用ng-repeat功能时，在是和否单选按钮之间切换时不再显示其他文本字段，但添加或删除字段的按钮也不起作用。我在做错误的地方一无所知。

我的index.html文件

  

  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>

Answer 1

$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
        }
}

我的单选按钮在angularJS

1 个答案: