Question

我正在使用一个有角度的网络应用程序而且我陷入其中的一部分。我试图通过选择bootstrap carousel中的项目来更新角度模型。我的意思是如果我从引导程序轮播中选择一个图像，图像的链接将被放入用于更新模型的表格中。是否可以这样做？这是我试图使用的代码< / p>

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

＆＃13;

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

＆＃13;

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轮播更新角度模型

1 个答案: