angularjs ng-repeat 确定点击了什么项目答案

【问题标题】：angularjs ng-repeat determine what item is clickedangularjs ng-repeat 确定点击了什么项目
【发布时间】：2015-03-22 03:27:31
【问题描述】：

我正在使用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>

控制器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...

【问题讨论】：

标签： javascript jquery angularjs ng-repeat angular-ngmodel

【解决方案1】：

例如，您可以在每个复选框上添加 ngClick 指令，并直接设置main.CreateProject.ProjectCatagorie：

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

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

【讨论】：

【解决方案2】：

ng-repeat 确实创建了一个新的子范围。诀窍是将 ng-model 值包装在父作用域中定义的对象中，一切都按预期工作。

<div ng-repeat="catagory in catagories">
    <input type="radio" ng-model="selection.catagory" name="product" ng-value="catagory">
</div>

function myCtrl($scope) {
    $scope.selection = {catagory : null};
    $scope.catagories = [
    {
       id: 1,
       title: 'Mobile and Desktop',
    },
    {
       id: 2,
       title: 'Desktop',
    },
    {
       id: 3,
       title: 'Mobile',
   }
  ];
}

见https://fiddle.jshell.net/nbg58dto/

【讨论】：