0

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

联系人列表：

<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>

我还想显示可以更改朋友状态的复选框，无论是选中还是未选中。我尝试了几种变体，但尽管我确实设法让我的复选框显示对象的实际真/假状态，但它们都没有改变单击时的对象状态。对于我的应用程序当前的“架构”，我将不胜感激。

4

1 回答 1

2

试一试：（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 来设置复选框和收藏状态之间的双向绑定。

于 2013-10-14T16:24:00.287 回答