使用 bootstrap 轮播更新 angular 模型

Question

我正在开发一个 angular 网络应用程序，但我卡在了 it.i 的一部分，我正在尝试通过选择一个项目来更新 angular 模型bootstrap carousel.i 意味着如果我 select 来自 bootstrap 轮播的图像，图像的 link 将被放入用于更新 model.is 可以做到吗？这是我正在尝试使用的代码

<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();
  }
});

});

Answer 1

如果将 input url 元素放置在 ng-repeat 中的某处，输入将随着幻灯片的变化而更新。现在的问题是范围 {{slide.image}} 在每个 <scope> 元素中，因此输入不能使用模型属性。

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

您可以根据需要调整 CSS 或添加额外的 <br/> 进行分隔。下面的笨蛋。让我知道是否有帮助。

http://plnkr.co/edit/Kd23U1ercuqc2ACpQEZH?p=preview

使用 bootstrap 轮播更新 angular 模型

updating angular model with bootstrap carousel

web

angularjs

angular-ui-bootstrap