单击不同单选按钮时更改角度$范围值

Question

我正在做一个角度项目，我试图通过更改单选按钮来更改范围值和元素值。单击单选按钮1时，我将从服务器获取值并将其保存在范围和元素中。当我单击单选按钮2时，所有范围和元素都必须删除。清空所有范围。但我的问题是当我编辑输入，并单击单选按钮2时，跨度值和占位符在输入中都显示出来。跨度不能显示。这是我的代码。

的index.html

<div class="row"> 
    <div class="col" style="border: none;"> 
     <ion-item class="item-checkbox" style="border: none;"> 
     <label class="checkbox"> 
<input type="radio" id="oldChecked" ng-value="true" ng-model="oldChecked" ng-click="showName()"> 
      </label> Radio 1 
     </ion-item> 
    </div> 
    <div class="col" style="border: none;"> 

     <ion-item class="item-checkbox" style="border: none;"> 
     <label class="checkbox"> 
       <input type="radio" id="newChecked" ng-value="true" ng-model="newChecked" ng-click="deleteName()"> 
      </label> Radio 2 
     </ion-item> 

    </div> 
    </div> 
    <div class="col" style="width: 100%;"> 
    <label class="item item-input item-floating-label" style=" 
    border-left: none;border-right: none;border-top:none;"> 
    <span class="input-label" style="text-align: left;">Name 
    <font style="color: #ef473a;font-size: 14px;">*</font> 
    </span> 
    <input type="text" placeholder="Name" ng-model="pName" 
    id="pName" name="pName" required> 
</label> 
     </div> 

controller.js

$scope.showName=function(){ 
$http.post(WebServer_URL, data, config) 
    .success(function (data, status, headers, config) { 
    var x2js = new X2JS(); 
    var jsonOutput = x2js.xml_str2json(data); 
    var myPatient = JSON.parse(jsonOutput.string); 
    $scope.pName = myPatient[0].Pt_Name; 
    document.getElementById('pName').value = myPatient[0].Pt_Name; 
}).error(function (data, status, header, config) { 
    console.log("Status: " + status); 
    }); 
} 

    $scope.deleteName=function(){ 
    $scope.pName=""; 
    document.getElementById('pName').value = ""; 
} 

Here is the image showing span and placeholder

请帮我在这个问题上。先谢谢你们。

Answer 1

// radio buttons should have same ng-model 
<input type="radio" value="oldChecked" ng-model="myOption" ng-click="showName()"> 
<input type="radio" value="newChecked" ng-model="myOption" ng-click="deleteName()"> 
<input type="text" id="pName" ng-model="pName" placeholder="Name"> 

    <script type="text/javascript"> 
    var app=angular.module("test",[]); 
    app.controller("testCtrl",function($scope){ 
    $scope.showName=function(){ 
     $scope.pName = "Hello"; 
    } 
    $scope.deleteName=function(){ 
    $scope.pName=""; 
    } 
});