Question

我对Angular.js很陌生，认为我错过了一些小而重要的东西。

要学习角度我正在构建这个小面板来将视频源路由到目的地。

我有一个源列表和一个目的地列表（每个目的地有2个插槽）。这些稍后将从API加载，但现在在js中定义。

当我选择其中一个来源时，＆＃34; selectedSource＆＃34;使用单击的源设置var。当我点击一个目的地 - 插槽时，设置该插槽的内容与＆＃34; selectedSource＆＃34;宾语。

控制台日志告诉我插槽的拇指网址已更新，但我的html没有显示更新的图像。我已经和＃34;申请＆＃34;尽管如此，我还没有意识到这是可行的方法。

请在此处查看我的简化代码： http://jsfiddle.net/f4Tgf/

function app($scope, $filter) {
$scope.selectedSource = null;

$scope.sources =  {
    source1 : {id:'source1', thumbUrl:'http://lorempixel.com/100/100/sports/1/'},
    source2 : {id:'source2', thumbUrl:'http://lorempixel.com/100/100/sports/2/'},
    source3 : {id:'source3', thumbUrl:'http://lorempixel.com/100/100/sports/3/'}
}

$scope.destinations = {
    dest1 : {id:'dest1', slots: {slot1 : $scope.sources.source2,slot2 : $scope.sources.source3} }
}

$scope.selectSource = function(source){
    if($scope.selectedSource == source){
        // toggle the selected source off if it is already selected
        $scope.selectedSource = null;
    }else{
        $scope.selectedSource = source;  
    }
}

$scope.selectSlot = function(slot){
    slot = $scope.selectedSource;
    console.log(slot.thumbUrl);

    //reset selected source
    $scope.selectedSource = null;
}
}

HTML：

<body >
<div ng-app ng-controller="app" class="container-fluid">
    <div class="row">





        <!-- SOURCES -->
        <div id="source-container" class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                     <h3 class="panel-title">Sources</h3>

                </div>
                <div class="panel-body row">
                    <!-- Show all sources -->
                    <div ng-repeat="source in sources" ng-class="{selected: source==selectedSource}" ng-click="selectSource(source)" class="col-md-6 col-sm-12">
                        <div class="thumbnail">
                            <img class="img-responsive" src="{{source.thumbUrl}}" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- SOURCES -->


        <!-- DESTINATIONS -->
        <div id="sink-container" class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                     <h3 class="panel-title">Destination</h3>

                </div>
                <div class="panel-body row">
                    <!-- Show all destinations -->
                    <div ng-repeat="destination in destinations" ng-class="{available: selectedSource!=null}">
                        <div class="thumbnail">
                            <div ng-repeat="slot in destination.slots" ng-click="selectSlot(slot)">
                                <img class="img-responsive" src="{{slot.thumbUrl}}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END DESTINATIONS -->


    </div>
</div>
</body>

（在你告诉我使用服务之前，请记住：这是第一次尝试学习项目）

Answer 1

问题是您正在尝试更改slot函数的值参数selectSlot()，而不是目标的插槽数组本身。由于您可以从目的地列表中选择一个或多个目的地插槽，因此最可能的解决方案是更改selectSlot()以接受当前目的地插槽阵列和您要更改的插槽的键。

只需从

更改此 HTML 代码即可

<div ng-repeat="slot in destination.slots" ng-click="selectSlot(slot)">

到

<div ng-repeat="(key, slot) in destination.slots" ng-click="selectSlot(destination.slots, key)">

并在您的 JAVASCRIPT selectSlot()定义中

$scope.selectSlot = function(slots, key){
    slots[key] = $scope.selectedSource;

    //reset selected source
    $scope.selectedSource = null;
}

请参阅此UPDATE FIDDLE以查看其实际效果。

注意：关于ng-repeat（键，值）synatx，您可以参考AngularJS' documentation。

Answer 2

似乎这是一个纯粹的JavaScript问题。

在你selectSlot()：

slot = $scope.selectedSource;

此操作实际上并未按预期将$scope.selectedSource分配给$scope.destinations.dest1.slots之一。

您可能希望这样做：

    slot.id = $scope.selectedSource.id;
    slot.thumbUrl = $scope.selectedSource.thumbUrl;

这将有效。

但请注意，在您的情况下，您将$scope.destinations.dest1.slots初始化为$scope.sources的两个对象，这意味着更改$scope.destinations.dest1.slots中的广告位也会导致更改$scope.sources中的相应广告位1}}。如果你说的话，它将正常工作，目的地“稍后将从API加载”。

角度视图不更新

2 个答案: