在单选按钮angularjs中选择默认值

Selecting default value in radio button angularjs

本文关键字：选择 默认值 angularjs 单选按钮      更新时间：2023-09-26

我想显示单选按钮的默认选择值为3。我的代码如下:-

<div class="checkbox-group" ng-init="ac.ServiceCode=3">
                <input type="radio" ng-model="ac.ServiceCode" id="acuOne" value="1" ng-change='GetAcuityLevel(1)'>
                <label for="acuityone">1</label>
                 <input type="radio" ng-model="ac.ServiceCode" id="acuTwo" value="2" ng-change='GetAcuityLevel(2)'>
                 <label for="acuitytwo">2</label>
                 <input type="radio" ng-model="ac.ServiceCode" id="acuThree" value="3" ng-change='GetAcuityLevel(3)'>
                 <label for="acuitythree">3</label>
                 <input type="radio" ng-model="ac.ServiceCode" id="acuFour" value="4" ng-change='GetAcuityLevel(4)'>
                 <label for="acuityfour">4</label>
                 <input type="radio" ng-model="ac.ServiceCode" id="acuFive" value="5" ng-change='GetAcuityLevel(5)'>
                 <label for="acuityfive">5</label>
</div>

但在这种情况下，它总是显示3，当我删除上面的代码，它显示正确的选择值在单选按钮。我想如果服务返回一些值(1到5)，那么应该选择单选按钮，否则应该选择默认值3。

这是因为你有一个ng-init为你做这些。

ng-init = "交流。ServiceCode = 3 "

通过这种方式，您的默认值将始终是3，并且始终初始化为该值。

你应该以不同的方式处理ac.ServiceCode:假设你的服务是$http。get请求

        $http.get('api/myservice').
            success(function(data, status, headers, config) {
                 if(data.valueReturned != null)
                    $scope.ac.ServiceCode = data.valueReturned;
                 else
                    $scope.ac.ServiceCode = 3;
            });
    };

也就是说，你应该在你的服务中处理默认值，而不是在你的HTML中。

尝试替换这一行:

<div class="checkbox-group" ng-init="ac.ServiceCode=3">
与这个:

<div class="checkbox-group" ng-init="ac.ServiceCode = ac.ServiceCode ? ac.ServiceCode : 3">

使用三元运算符检查值是否为真，否则默认为3。

你可以这样做，不要使用ng-init, ng-if会解决你的问题。当服务返回值大于选择的值时，则选择3。

尝试像$scope那样改变它。Ac = {};美元的范围。ac = {ServiceCode:4}并观察其行为

var app = angular.module('myapp',[]);
app.controller('appCtrl',function($scope){
  
  $scope.ac = {};
  
  
    
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="appCtrl">
  <div class="checkbox-group" ng-if="!(ac.ServiceCode)?ac.ServiceCode=3:ac.ServiceCode">
    <input type="radio" ng-model="ac.ServiceCode" id="acuOne" value="1" ng-change='GetAcuityLevel(1)'>
                <label for="acuityone">1</label>
                 <input type="radio" ng-model="ac.ServiceCode" id="acuTwo" value="2" ng-change='GetAcuityLevel(2)'>
                 <label for="acuitytwo">2</label>
                 <input type="radio" ng-model="ac.ServiceCode" id="acuThree" value="3" ng-change='GetAcuityLevel(3)'>
                 <label for="acuitythree">3</label>
                 <input type="radio" ng-model="ac.ServiceCode" id="acuFour" value="4" ng-change='GetAcuityLevel(4)'>
                 <label for="acuityfour">4</label>
                 <input type="radio" ng-model="ac.ServiceCode" id="acuFive" value="5" ng-change='GetAcuityLevel(5)'>
                 <label for="acuityfive">5</label>
  </div>
</div>

相关文章：