angularjs ng-repeat确定要单击的项目

乔迪·范德赫克

我使用将图片加载到可点击的框中ng-repeat现在我想在用户单击其项目框时通常返回对象标题,我通常将其放在a中,ng-model但是由于im使用ng-repeat该模型将在每个创建的框中重用...

我正在寻找一种检查所选对象标题的方法。并将其放入ng模型中,以备后用。

现在的代码:

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

contoller 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...
dfsq

例如,您可以在每个复选框上添加ngClick指令,然后main.CreateProject.ProjectCatagorie直接进行设置

<input type="radio" name="product" ng-click="main.CreateProject.ProjectCatagorie = catagories">

演示: http //plnkr.co/edit/awn63n7f1YBO5mOUMLDT?p = preview

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS ng内单击ng-repeat

来自分类Dev

如何通过单击 Angularjs ng-repeat 项目在模态上显示项目

来自分类Dev

过滤ng-repeat angularjs中的项目

来自分类Dev

AngularJS ng-repeat不显示项目

来自分类Dev

AngularJs:ng-repeat =“ arrayValue中的项目”

来自分类Dev

ng-repeat添加项目(AngularJs 1.2.26)

来自分类Dev

ng-if在ng-repeat angularjs中

来自分类Dev

AngularJS。嵌套ng-repeat

来自分类Dev

AngularJS ng-repeat rerender

来自分类Dev

AngularJS if statement with ng-repeat

来自分类Dev

AngularJS“垂直” ng-repeat

来自分类Dev

嵌套的ng-repeat angularjs

来自分类Dev

AngularJs。ng-repeat问题

来自分类Dev

AngularJS IF ELSE 与 ng-repeat

来自分类Dev

AngularJs在ng-repeat中设计单个单击元素的样式

来自分类Dev

AngularJS ng-repeat删除项目以回收内存

来自分类Dev

如何从AngularJS ng-repeat中排除项目

来自分类Dev

AngularJS ng-repeat项目水平到垂直

来自分类Dev

AngularJS-检查ng -repeat中是否为空项目

来自分类Dev

使用 ng-repeat AngularJS 计算数组中的项目

来自分类Dev

ng-repeat在ng-repeat中,每个项目都带有td-AngularJS

来自分类Dev

如何使ng禁用以检查ng-repeat中的项目值(使用AngularJS)

来自分类Dev

如何使ng禁用以检查ng-repeat中的项目值(使用AngularJS)

来自分类Dev

在ng-repeat中的某些项目上禁用AngularJS ng-href

来自分类Dev

AngularJS ng-repeat加载状态

来自分类Dev

angularjs:ng-repeat中的表单验证

来自分类Dev

if statement in ng-repeat directive in AngularJS

来自分类Dev

AngularJS ng-repeat colspan rowpan问题

来自分类Dev

AngularJs ng-repeat无法正常工作