Question

我要做的是拥有一项服务（比方说：myService），该服务包含特定数据，例如代表打印机存在和选择的对象：

var localPrinters = [{ id: 12, name: 'HP', type: 'laser' },
                     { id: 33, name: 'Lexmark', type: 'laser' }];
var activePrinter = {};

在某些偶尔显示的视图中（比如应用程序设置），我有一个控制器，它将在本地范围内定义变量，这些变量将指向注入的myService中的对象。

然后视图将使用ng-repeat来迭代localPrinters中的打印机对象，并显示与数组中每个对象相对应的单选按钮。

现在我需要两件事...... 1）在radiobutton选择改变时用相应的对象值
更新activePrinter 2）如果activePrinter已经包含一个对象，当视图加载时我想要检查相应的无线电（如果它的值对象与activePrinter中的对象匹配，否则不应选择任何一个。

我已经通过以下几种方式管理了1）..要么坚持使用模型，要么添加方法来调用ng-change。

 //pseudocode
 <container ng-repeat="printer in printers" >
      <radio ng-value="printer" ng-model="$scope.activePrinter"/>
 </container>

或

//pseudocode
 <container ng-repeat="printer in printers" >
      <radio ng-value="printer" ng-change="selectPrinter(printer)" "ng-model="$scope.activePrinter"/>
 </container>

我遇到的麻烦是2）不确定是否有一种角度方式可以自动找出与activePrinter选择匹配的某些打印机值并检查无线电。也不确定我为此目的使用ng-model的方式。

任何指针？谢谢！

Answer 1

你可以这样做：

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {

  $scope.printers = [{
    id: 12,
    name: 'HP',
    type: 'laser'
  }, {
    id: 33,
    name: 'Lexmark',
    type: 'laser'
  }];

  $scope.activePrinter = {};
  
  //set default printer
  $scope.activePrinter.printer = $scope.printers[0]

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">

    <div class="container" ng-repeat="printer in printers">
      <label>{{printer.name}}</label>
      <input type="radio" ng-value="printer" ng-model="activePrinter.printer" />
    </div>

    Active Printer:{{activePrinter.printer.id}} | {{activePrinter.printer.name}} | {{activePrinter.printer.type}}

  </div>
</body>

AngularJS - 基于对象值检查无线电

1 个答案: