[英]Modifying factory objects with checkboxes in angular
我正在构建一个电话簿应用程序。 我有一些联系人,其中一些有“最喜欢的”布尔值。 我的联系人来自工厂。 当我从我的应用程序中的联系人列表中单击某个名称时,我会在右侧获得部分联系人详细信息。 所以它看起来像这样:
联系人列表:
<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'架构'的任何意见和建议。
给这个镜头:( 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来设置复选框和收藏状态之间的双向绑定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.