Угловой вид не обновляется

Я довольно новичок в Angular.js и думаю, что мне не хватает чего-то маленького, но важного здесь.Угловой вид не обновляется

Чтобы узнать угловую структуру, я создаю эту небольшую панель для маршрутизации источников видео в пункты назначения.

У меня есть список источников и список пунктов назначения (каждый пункт назначения с 2 слотами). Затем они будут загружены из API, но пока определены в js.

Когда я выбираю один из источников, «selectedSource» var устанавливается с помощью источника с щелчком. Когда я, чем щелкаю по месту назначения, устанавливает содержимое этого слота с объектом «selectedSource».

Журнал консоли сообщает мне, что указатель пальца слота обновлен, но мой html не показывает обновленное изображение. Я уже возился с «применить», хотя я не понимаю, что это путь.

Смотрите мой упрощенный код здесь: 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>

(прежде чем сказать мне пользоваться услугами и поэтому, пожалуйста, помните: это первый проект попытка обучения)

источник

2014-04-14 JasperZelf

http://jsfiddle.net/dJLrM/ похожее на предоставленный ответ ... – aet

Проблема заключается в том, что вы пытаетесь изменить параметр значения, 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)">

и в вашем JAVASCRIPTselectSlot() определение должно быть

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

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

См т его UPDATE FIDDLE для просмотра в действии.

Примечание: вы можете обратиться к AngularJS' documentation относительно ng-repeat's (key, value) synatx.

источник

2014-04-14 07:46:59 ryeballar

Это имеет большой смысл .... Спасибо! – JasperZelf

Кажется, это чистая проблема с 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. Он будет работать нормально, если, как вы сказали, адресаты «будут позже загружены из API».

источник

2014-04-14 08:13:45

Угловой вид не обновляется

ответ

Смежные вопросы