在angularjs ng-switch中,子范围表单不可用于父范围

时间:2017-04-27 11:15:51

标签: angularjs ng-switch

访问以ng-switch编写的AT模型对象,此处ng-switch创建子范围,并在此范围内创建表单。因此,子范围表单在父范围内不可用。 请帮忙

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">

  <input type="radio" ng-model="fileType" value="Excel" style=" margin-left: 19px;" >Excel
  <input type="radio" ng-model="fileType" value="Text" style=" margin-left: 19px;" >Text

  <div ng-switch="fileType">
    <div ng-switch-default="Excel">
      <h4 style="margin-top: 15px;">
        <b>Analysis Type </b> 
        <input type="radio" ng-model="AT"  value="SRI"  style=" margin-left: 8px;" >SRI
        <input type="radio" ng-model="AT"   value="JAG" style=" margin-left: 23px;" >JAG
      </h4>
      <!-- {{AT}}  i am  able to acess it -->
    </div>
    <div ng-switch-when="Text">
      <h4 style="margin-top: 15px;"></h4>
    </div>
  </div>
  {{fileType}}	
  {{AT}} <!-- how can i access it -->

</body>
</html>

1 个答案:

答案 0 :(得分:0)

这是范围继承问题,因为ng-switch创建了自己的范围。

ng-model="$parent.AT"

中使用ng-switch

&#13;
&#13;
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">

<input type="radio" ng-model="fileType"   value="Excel" style=" margin-left: 19px;" >Excel
<input type="radio" ng-model="fileType"   value="Text" style=" margin-left: 19px;" >Text

<div ng-switch="fileType">
          <div ng-switch-default="Excel">
		  <h4 style="margin-top: 15px;"><b>Analysis Type </b> 
			<input type="radio" id="atype_sri" ng-model="$parent.AT"  value="SRI"  style=" margin-left: 8px;" ><label for="atype_sri">SRI</lable>
			<input type="radio" id="atype_jag" ng-model="$parent.AT"   value="JAG" style=" margin-left: 23px;" ><label for="atype_jag">JAG</label></h4>
            </div>
            <div ng-switch-when="Text">
		  <h4 style="margin-top: 15px;">		       </h4>
            </div>
            </div>
	{{fileType}}	
     {{AT}} <!-- now you can access it -->

</body>
</html>
&#13;
&#13;
&#13;