angularjs – 设置ng-repeat内的无线电的默认值(angular-js)

发布时间：2020-12-17 17:12:25 所属栏目：安全来源：网络整理

导读：如果此值是对象而不是字符串,如何设置无线电的默认值？编辑：为了使事情更清楚,我更新了小提琴：看看小提琴： http://jsfiddle.net/JohannesJo/CrH8a/ body ng-app="app"div ng-controller='controller' oConfigTerminal value= input type="text" ng-mod

如果此值是对象而不是字符串,如何设置无线电的默认值？

编辑：

为了使事情更清楚,我更新了小提琴：
看看小提琴：
http://jsfiddle.net/JohannesJo/CrH8a/

<body ng-app="app">
<div ng-controller='controller'>
            oConfigTerminal value= <input type="text" ng-model="oConfigTerminal"/><br><br>

    <div ng-show="!oConnection.aOptions"
    ng-repeat="oConnection in oFormOptions.aStationaryConnections">
        <label>
            <input type="radio" name="connection" ng-model="$parent.oConfigTerminal" value="{{oConnection.id}}"
            />{{oConnection.sId}}</label>
    </div>

</div>

app = angular.module('app',[]);

app.controller('controller',function ($scope) {
$scope.oFormOptions = {};
$scope.oConfigTerminal=0;
$scope.oFormOptions.aStationaryConnections = [{
    id: 1,sId: "analog"
},{
    id: 2,sId: "isdn"

},{
    id: 3,sId: "dsl"
}];

// !!! Trying to set the default checked/selected value !!!
$scope.oConfigTerminal = $scope.oFormOptions.aStationaryConnections[0];
});

解决方法

在浏览器控制台中检查实时html,您将看到oConnection是一个对象,无线电的值变为：{“id”：1,“sId”：“analog”}.您可能希望使用oConnection.id作为值

ng-repeat中的另一个问题是,通过将ng-model设置为$parent.variableName,需要为ng-model解决范围继承问题

您的oConnectionTmpView对我没有任何意义,因此为了简化我将其删除：

HTML：

<div ng-show="!oConnection.aOptions" ng-repeat="oConnection in oFormOptions.aStationaryConnections">
  <label>
       <input type="radio"  
              name="connection" 
              ng-model="$parent.oConfigTerminal" 
               value="{{oConnection.id}}"
         />
           {{oConnection.sId}}
     </label>
 </div>

JS：

app = angular.module('app',function ($scope) {
    $scope.oFormOptions = {};
    $scope.oConfigTerminal = 0;
    $scope.oFormOptions.aStationaryConnections = [{
        id: 1,sId: "analog"
    },{
        id: 2,sId: "isdn"

    },{
        id: 3,sId: "dsl"
    }];
}

演示：http://jsfiddle.net/CrH8a/14/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!