如何在AngularJS

Question

我正在使用来自 api 的数据，并将其与复选框一起显示在普通列表视图中。有两个api，其中我在一个资源中有完整的资源列表，在另一个资源中有所选资源。

目前喜欢这个

预期列表

这是我在ng-repeat循环中的复选框

<div class="search" ng-repeat="resource in ViewData.resources">
    <input type="checkbox" value="{{resource.resourceName}}" ng-model="resourceList[resource.resourceId]" 
                            ng-click="resourceChange(resource.resourceId)"
                            ng-checked="checkSelectedResource(resource.resourceId)"> 
    <label class="list{{resource.resourceId}}" >{{resource.resourceName}}</label>
</div>

Answer 1

您可以使用ng-if进行控制。如果ng-checked项为真，则可以使用ng-show="$first"

Answer 2

这是一个有效的例子： http://jsfiddle.net/irhabi/fqdqbpbc/

<强> HTML

<div ng-controller="MyCtrl">
  <div class="search" ng-repeat="fruit in fruits | orderBy:['-checked','name']:false">
    <input id="fruit{{$index}}" type="checkbox" ng-model="fruit.checked"> 
      <label for="fruit{{$index}}">{{fruit.name}}</label>
   </div>
   <br/>
   <p>fruits model:</p>
   <pre>{{fruits|json}}</pre>
</div>

<强> JS

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', MyCtrl);

function MyCtrl($scope) {
    $scope.fruits = [
      {name:'apple',checked:false},
      {name:'banana',checked:false},
      {name:'orange',checked:false}
    ];
}

Answer 3

将您的代码更改为此

<div class="search" ng-repeat="resource in ViewData.resources">
    <input type="checkbox" value="{{resource.resourceName}}" ng-model="resourceList[resource.resourceId]" 
                            ng-click="resourceChange(resource.resourceId)"
                            ng-checked="$first"> 
    <label class="list{{resource.resourceId}}" >{{resource.resourceName}}</label>
</div>

您可以轻松触发Controller中第一个元素的点击事件，如

   $scope.checkFirst=function(first){if(first == true){ //your function }}

如果您想按名称订购，请执行此操作

 ng-repeat="resource in ViewData.resources | orderBy://name for example