使用jQuery检查角度单选按钮

Question

我有一个带有一对单选按钮的角度模式，根据quicklink的值，我希望选中某个按钮，但是在用鼠标单击之前，这两个按钮都不会被选中。

<label>
    <input name="quicklink" rows="3" type="radio" value="1" 
           ng-model="entity.quicklink" id="radio-1" />
    yes</label>
<label>
    <input name="quicklink" rows="3" type="radio" value="0" 
           ng-model="entity.quicklink" id="radio-2" />
    no</label>

$scope.entity = data;
if ($scope.entity['quicklink'] == '1') {
    $("#radio-1").prop("checked", true)
}
if ($scope.entity['quicklink'] == '0') {
    $("#radio-2").prop("checked", true)
}

Answer 1

作为最佳实践，我们应该避免直接从Angular中使用jQuery调用DOM。

理想情况下，如果数据具有有效的QuickLink值{quicklink: '0'}，则不需要执行任何操作。

http://plnkr.co/edit/98rog2BMCLXGfNtoWy1o

angular.module("app", [])
  .controller("myController", function($scope){

    $scope.entity = {quicklink: '0'};

  });

Answer 2

适用于我(没有jQuery)：

​

var app = angular.module('app', []);
app.controller('controller', ['$scope', function($scope) {
  $scope.entity = { quicklink: 1 };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <div class="form-group">
    <label>quicklink label</label>
    <label class="radio-inline">
        <input name="quicklink" rows="3" type="radio" value="1" class="form-control" ng-model="entity.quicklink" id="radio-1"/>
        yes</label>
    <label class="radio-inline">
      <input name="quicklink" rows="3" type="radio" value="0" class="form-control" ng-model="entity.quicklink" id="radio-2"/>
      no</label>
  </div>

  <div>Value of quicklink is: {{entity.quicklink}}</div>
</div>

​