Javascript 如何在angularjs中显示基于需求的数据？

在这个例子中，基于手机品牌选择，手机型号附带复选框，一切正常。基于用户品牌选择的手机型号即将推出

对于htc品牌，当用户单击htc型号时，我有带有图像的型号。htc型号应显示图像，而不是显示图像

Htc One X9

欲望820

欲望810S

它应该显示带有复选框的图像，但在提交时应该传递模型名称。任何人的帮助都是感激的

var myApp=angular.module（'myApp'，[]）；
控制器（'MyCtrl'，函数（$scope，$http）{
$scope.selectedBrands=[]；
$scope.selectBrand=功能（selectedphone）{
//如果我们取消选择该品牌
if（$scope.selectedBrands.indexOf（selectedphone.brandname）=-1）{
//取消选择该品牌的所有手机
angular.forEach（$scope.phones，函数（phone）{
如果（phone.brandname==selectedphone.brandname）{
phone.selected=false；
}
});
}
}
$scope.checkSelectedphones=函数（）{
var modelNames=[]；
var jsonArr=[]；
var subModelArr=[]；
var aletrMsg=''；
angular.forEach（$scope.phones，函数（phone）{
如果（电话选择）{
modelNames.push（电话）；
var found=jsonArr.some（函数（el）{
如果（el.model==phone.brandname）{
el.subModel.push（phone.modelname）；
返回true；
}
});
如果（！找到）{
subModelArr.push（phone.modelname）；
jsonArr.push({
型号：phone.brandname，
品牌：“诺基亚”，
子模型：子模型arr，
城市：“诺伊达”，
});
subModelArr=[]；
}
}
phone.selected=false；
});
log（modelNames.length）；
如果（modelNames.length==0）{
警报（modelNames.length？aletrmg:'未选择电话！'）；
}否则{
log（jsonArr）；
}
$scope.selectedBrands=[]；
}
$scope.phones=[{
id:“986745”，
品牌名称：“诺基亚”，
型号名称：“Lumia 735 TS”
}, {
id:“896785”，
品牌名称：“诺基亚”，
型号名称：“诺基亚Asha 230”
}, {
id:“546785”，
品牌名称：“诺基亚”，
型号名称：“Lumia 510”
}, {
id:“144745”，
品牌名称：“三星”，
型号名称：“银河趋势840”
}, {
id:“986980”，
品牌名称：“三星”，
型号名称：“Galaxy A5”
}, {
id:“586980”，
品牌名称：“三星”，
型号名称：“Galaxy Note 4 Duos”
}, {
id:“986980”，
品牌名称：“三星”，
型号名称：“Galaxy A5”
}, {
id:“586980”，
品牌名称：“三星”，
型号名称：“Galaxy Note Duos”
}, {
身份证号码：“232980”，
品牌名称：“Htc”，
型号名称：“Htc One X9”，
图像：“http://cdn.bgr.com/2015/03/bgr-htc-one-m9-1.jpg",
}, {
id:“456798”，
品牌名称：“Htc”，
型号名称：“欲望M9”，
图像：“https://vtcdn.com/sites/default/files/images/2014/6/10/img-1402379949-1.jpg",
}, {
身份证号码：“656798”，
品牌名称：“Htc”，
型号名称：“欲望810S”，
图像：“https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQINOLh4PEebd7H8F5MM9SGdC14oQAH91I4XqHJZL3LlUg1PKoV",
}];
});
myApp.filter（'unique'，function（）{
返回函数（集合、键名）{
var输出=[]，
键=[]；
angular.forEach（集合、功能（项）{
var key=项目[keyname]；
if（键索引of（键）=-1）{
按键。按（键）；
输出推送（项目）；
}
});
返回输出；
};
});

检查选定的电话
{{phone.brandname}}


{{brand}}
{{phone.modelname}
我根据你的代码做了一把小提琴。以下是链接：

只有HTC手机有图像。因此，我所做的是添加以下代码：

<img ng-if="phone.image" src="{{phone.image}}" width="20" height="20">
<span ng-if="!phone.image">{{phone.modelname}}</span>


{{phone.modelname}

因此，如果有可用的图像，将显示该图像。否则，它将显示模型名称

我还删除了名为selectBrand（）的方法，这似乎不是必需的。
我根据您的代码制作了一个提琴。以下是链接：

只有HTC手机有图像。因此，我所做的是添加以下代码：

<img ng-if="phone.image" src="{{phone.image}}" width="20" height="20">
<span ng-if="!phone.image">{{phone.modelname}}</span>


{{phone.modelname}

因此，如果有可用的图像，将显示该图像。否则，它将显示模型名称

我还删除了名为selectBrand（）的方法，该方法似乎没有必要。
您可以使用
ng show
按不同条件显示图像和文本

改变

<input type="checkbox" ng-model="phone.selected"> {{phone.modelname}}

{{phone.modelname}

到


{{phone.modelname}

例如：
您可以使用
ng show
按不同条件显示图像和文本

改变

<input type="checkbox" ng-model="phone.selected"> {{phone.modelname}}

{{phone.modelname}

到


{{phone.modelname}

例如：
在我的评论之后添加一个答案。另外两个答案完全有效。
我已经在您的代码中添加了这一行，它填充了来自
phone.image的图像url

<img src="{{phone.image}}" alt="{{phone.modelname}}" height="100px" width="100px"/>



此外，一个可选的div，如果勾选，则显示名称

<div ng-show="phone.selected">
      {{phone.modelname}}
     </div>


{{phone.modelname}

在我的评论之后添加了一个答案。另外两个答案完全有效。
我已经在您的代码中添加了这一行，它填充了来自
phone.image的图像url

<img src="{{phone.image}}" alt="{{phone.modelname}}" height="100px" width="100px"/>



此外，一个可选的div，如果勾选，则显示名称

<div ng-show="phone.selected">
      {{phone.modelname}}
     </div>


{{phone.modelname}

这是一个这样的工作
吗？是的，谢谢@Satej-SPosting它作为一个答案，因为它是在第一次发布答案之前。像这样吗？是的，谢谢@Satej-SPosting它作为一个答案，因为它是在第一次发布答案之前