javascript - angularjs ng-repeat determine what item is clicked -
im loading objects clickable boxes using ng-repeat. want return objects title when user has clicked item-box put in ng-model since im using ng-repeat model reused in every created box...
i searching way check selected objects title. , put in ng-model re-use later on.
code now:
creation of object boxes in 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 file:
// objects vm.catagories = [ { id: 1, title: 'mobile , desktop', description: 'full concept design 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 android and/or ios', image: '../img/project/mobile.png' } ]; //javascript put checked prop on checked box: //works $(function(){ $('div.product-chooser').find('div.product-chooser-item').on('click', function(){ // remove selected class form $(this).parent().parent().find('div.product-chooser-item').removeclass('selected'); // put checked $(this).addclass('selected'); $(this).find('input[type="radio"]').prop("checked", true); // seleciton if ($('input[type=radio]:checked').length > 0) { // 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(); // model in function: createproject within maincontroller. // function doesnt end here...
you can example add ngclick directive on every checkbox, , set main.createproject.projectcatagorie directly:
<input type="radio" name="product" ng-click="main.createproject.projectcatagorie = catagories">
Comments
Post a Comment