Question

我正在构建一个电话簿应用程序。我有一些联系人，其中一些有“最喜欢的”布尔值。我的联系人来自工厂。当我从我的应用程序中的联系人列表中单击某个名称时，我会在右侧获得部分联系人详细信息。所以它看起来像这样：

联系人列表：

<ul>
<li ng-repeat="person in people" ng-click="showDetails(person)">
...

主控制器（好在这里我觉得这不是最好的方法。）：

var selectedPersonName = null;

$scope.showDetails = function(person){
    $scope.selectedPersonName = person.name;
    $scope.selectedPersonCity = person.city;
}

联系方式部分：

<span ng-show="selectedPersonName == null">Select contact</span>

<ul class = "contact-details" ng-hide="selectedPersonName == null">
    <li>{{selectedPersonName}}</li>
    <li>{{selectedPersonCity}}</li>
</ul>

我还想显示一个复选框，它会更改好友状态，无论是已选中还是未选中。我尝试了几种变体，但是虽然我设法让我的复选框显示对象的实际真/假状态，但它们都不会在点击时改变对象状态。我很感激有关我的应用程序的当前um'架构的任何意见和建议。

Answer 1

给这一点:( Plunkr）

HTML：

<span ng-show="!selectedPerson">Select contact</span>

<ul class = "contact-details" ng-hide="!selectedPerson">
    <li>{{selectedPerson.name}}</li>
    <li>{{selectedPerson.city}}</li>
    <li>
      <label>
        <input type="checkbox" ng-model="selectedPerson.favorite"> Favorite
      </label>
    </li>
</ul>

JS：

$scope.showDetails = function(person){
    $scope.selectedPerson = person;
}

基本上你只需要使用ng-model来设置复选框和收藏状态之间的双向绑定。

使用angular中的复选框修改工厂对象

1 个答案: