i'm working on angular web app , i'm stuck in part of it.i'm trying update angular model choosing item in bootstrap carousel.i mean if select image bootstrap carousel, image's link put in form used update model.is possible it?this code i'm trying make working
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="interaction_ctrl"> <form> <table> <tr> <td>image url:</td> <td> <input type="url" placeholder="http://reelyactive.com/images/barnowl.jpg" ng-model="person.image" ng-change='change()' class="form-control" /> </td> </tr> <tr> <td> <carousel> <slide ng-repeat="slide in slides" active="slide.active" ng-model="person.image" ng-change='change()'> <img ng-src="{{slide.image}}" style="height:100px; margin:auto"> <div class="carousel-caption"> <h4>slide {{$index}}</h4> <p>{{slide.text}}</p> </slide > </carousel> </td> </tr> </table> </form> </div>
var mymodule = angular.module("jsonerator", ['ui.bootstrap']); mymodule.controller("interaction_ctrl", function ($scope) { $scope.slides = []; $scope.slides.push({ text: 'barnowl', image: 'http://reelyactive.com/images/barnowl.jpg' }); $scope.slides.push({ text: 'barnacles', image: 'http://reelyactive.com/images/barnacles.jpg' }); $scope.slides.push({ text: 'barterer', image: 'http://reelyactive.com/images/barterer.jpg' }); $scope.slides.push({ text: 'chickadee', image: 'http://reelyactive.com/images/chickadee.jpg' }); $scope.slides.push({ text: 'starling', image: 'http://reelyactive.com/images/starling.jpg' }); function changekeyvalue() { for(var key in $scope.person) { if($scope.person.hasownproperty(key)) { if(!$scope.person[key].length) { delete $scope.person_ld["@graph"][0]["schema:" + key]; } else { $scope.person_ld["@graph"][0]["schema:" + key] = $scope.person[key]; } } } } $scope.change = function() { changekeyvalue(); } }); });
if place input url element somewhere within ng-repeat, input update slides change. right issue scope {{slide.image}} within each <scope> element, input cannot utilize model attribute.
<carousel> <slide ng-repeat="slide in slides" active="slide.active" ng-model="person.image"> <input type="url" placeholder="http://reelyactive.com/images/barnowl.jpg" ng-model="person.image" class="form-control" /> <br> <br> <img ng-src="{{slide.image}}" style="height:100px; margin:auto"> <div class="carousel-caption"> <h4>slide {{$index}}</h4> <p>{{slide.text}}</p> </slide > </carousel> you can adjust css or add additional <br/> separate needed. plunker below. let me know if helps.
Comments
Post a Comment