Question

拥有此代码。我不确定是否有更简单的方法来做同样的事情

$scope.parent = {
  id: 1,
  name: kev,
  children: [{
    id: 1,
    firstborn: true
  }, {
    id: 2,
    firstborn: false
  }, {
    id: 3,
    firstborn: false
  }]
};

$scope.toggleFirstBorn = function(parent, child) {
  //toggle firstborn          
  angular.forEach(parent.children, function(child) {
    ea.firstborn = false;
  });

  child.firstborn = true;

};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-repeat="child in parent.children">
    <span class="input-group-btn">
            <button class="btn btn-sm btn-secondary" ng-class="{true:'active, btn-success', false: ''}[child.firstborn == 1]"  ng-click="toggleFirstBorn(parent,child)">Is FirstBorn</button>
        </span>
  </div>
</div>

Answer 1

理想情况下，您不必在每个子对象上重复firstChild属性。而是使用相关的属性。 firstChild是孩子与其父母的相对财产。因此，您可以在父firstChild上添加一个属性，该属性将具有该子项的ID。

如果您不想访问孩子的任何其他属性，那么在第一个子属性中设置相应的子ID：

$scope.parent = {
    id: 1,
    name: "Name1",
    children: [{
      id: 1

    }, {
      id: 2

    }, {
      id: 3
    }],
    firstChild: 1
  };


  $scope.toggleFirstBorn = function(parent, child) {
    $scope.parent.firstChild = child.id;

  };

  $scope.isFirst = function(parent, child) {
    return angular.equals(parent.firstChild, child.id);
    //you could just compare this in the view itself.
    //"{true:'active btn-success', false: ''}[parent.firstChild === child.id)]"
  }

如果由于某种原因想要访问整个子对象，则根据id添加一个包含对象本身的属性。

 $scope.parent = {
    id: 1,
    name: "Name1",
    children: [{
      id: 1

    }, {
      id: 2

    }, {
      id: 3
    }],
    firstChild: 1
  };

  //Set the initial data, keep firstChildOb as property that holds the reference. 
  //You can use a variable as well if you do not have a collection of parents and their children.
  //using array.some here you could as well use for loop and set the property
  $scope.parent.children.some(function(child) {
    return (child.id === $scope.parent.firstChild) && ($scope.parent.firstChildOb = child);
  });

  //On toggle just replace the object reference
  $scope.toggleFirstBorn = function(parent, child) {
     parent.firstChildOb = child;
   };

  //comparator that compares the current child with already set firstChildObj
  $scope.isFirst = function(parent, child) {
    return angular.equals(parent.firstChildOb, child);
  }

和

  <button class="btn btn-sm btn-secondary" 
         ng-class="{true:'active btn-success', false: ''}[isFirst(parent,child)]"  
         ng-click="toggleFirstBorn(parent,child)">Is FirstBorn</button>

angular.module('app', []).controller('ctrl', function($scope) {

  $scope.parent = {
    id: 1,
    name: "Name1",
    children: [{
      id: 1

    }, {
      id: 2

    }, {
      id: 3
    }],
    firstChild: 1
  };

  //Set the initial data
  $scope.parent.children.some(function(child) {
    return (child.id === $scope.parent.firstChild) && ($scope.parent.firstChildOb = child);
  });

 //or with array.find
 /*$scope.parent.firstChildOb = $scope.parent.children.find(function(child){ child.id ===  $scope.parent.firstChild});*/

  $scope.toggleFirstBorn = function(parent, child) {
    $scope.parent.firstChildOb = child;

  };

  $scope.isFirst = function(parent, child) {
    return angular.equals(parent.firstChildOb, child);
  }

});

.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="child in parent.children">
    <span class="input-group-btn">
            <button class="btn btn-sm btn-secondary" ng-class="{true:'active btn-success', false: ''}[isFirst(parent,child)]"  ng-click="toggleFirstBorn(parent,child)">Is FirstBorn</button>
        </span>
  </div>
</div>

Polyfill for Array.some

Polyfill for Array.find

您将如何优化对新生儿的搜索并将其切换为

1 个答案: