我使用 ng-repeat
将对象加载到可点击的框中。
现在我想在用户单击其项目框时返回对象标题
通常我会把它放在 ng-model
中,但是因为我使用 ng-repeat
模型将在每个创建的盒子中重复使用......
我正在寻找一种方法来检查所选对象的标题。并将其放入 ng-model 中以供日后重用。
现在编码:
在 html 中创建对象框:
<div class="row form-group product-chooser">
<a href="#drop">
<div id="catagories" ng-repeat="catagories in main.catagories" class="col-xs-12 col-sm-12 col-md-4 col-lg-4" value="{{catagories.title}}">
<div class="product-chooser-item">
<img src="{{catagories.image}}" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="Catagories">
<div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<span class="title">{{catagories.title}}</span>
<span class="description">{{catagories.description}}</span>
<input type="radio" name="product" value="{{catagories.title}}">
</div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<P>selected is: {{main.CreateProject.ProjectCatagorie}}</P>
Controller js文件:
// objects
vm.catagories = [
{
id: 1,
title: 'Mobile and Desktop',
description: 'Full concept design to complete App',
image: '../img/Project/desktop_mobile.png'
},
{
id: 2,
title: 'Desktop',
description: 'Blogs, Webshops, complete full back-end Web-Apps',
image: '../img/Project/desktop.png'
},
{
id: 3,
title: 'Mobile',
description: 'Mobile websites, Apps for Android and/or IOS',
image: '../img/Project/mobile.png'
}
];
//javascript to put the checked prop on the checked box:
//works
$(function(){
$('div.product-chooser').find('div.product-chooser-item').on('click', function(){
// remove selected class form all
$(this).parent().parent().find('div.product-chooser-item').removeClass('selected');
// put checked
$(this).addClass('selected');
$(this).find('input[type="radio"]').prop("checked", true);
// get seleciton
if ($('input[type=radio]:checked').length > 0) {
// do something here
alert($('input[type=radio]:checked').val());
}
// set rest disabled
$('div.product-chooser').not('.selected').addClass('disabled');
});
});
vm.CreateProject = function(){
// selected catagorie
//fails
ProjectCatagorie = $('input[type=radio]:checked').val();
// this model is in the function: CreateProject within the maincontroller.
// function doesnt end here...
最佳答案
例如,您可以在每个复选框上添加 ngClick 指令,并直接设置 main.CreateProject.ProjectCatagorie
:
<input type="radio" name="product" ng-click="main.CreateProject.ProjectCatagorie = catagories">
关于javascript - angularjs ng-repeat确定点击了什么项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29174095/