innerHTML函數中的ng-repeat？

我有3列。第一個列出了一個數組中的主題列表。在該陣列中，每個主題都有其內部列出的特定課程，其中包括課程信息的其餘部分。innerHTML函數中的ng-repeat？

如果使用.innerHTML函數放置它，我可以讓ng-repeat「函數」正常運行嗎？

（我是新的JS跟我這麼裸露的我也可以使用了錯誤的標識，試圖調用從數組，這也可能會導致我的問題的內容。）

範圍：

$scope.subjects = [ 
    {text:'English', courses:[ 
     {coursesub:'English 1', coursedata:[ 
      {coursedesc:'test'} 
     ] 
     } 
    ] 
    }, 
    {text:'Mathematics'}, 
    {text:'Science'} 
]; 

$scope.showDetail = function (todo) { 
    document.getElementById("courselistings").innerHTML = '<a ng-repeat="course in subject.courses" class="list-group-item" target="#courseinformation" ng-click="showDetail(course)">{{courses.coursesub}}</a>'; 
};

HTML + angularjs：

<div class="col-md-3" id="subjects"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Subjects</h3> 
        </div> 
        <div class="panel-body"> 
         <div class="list-group"> 
          <a ng-repeat="subject in subjects" class="list-group-item" target="#courselistings" ng-click="showDetail(subject)"> 
           {{subject.text}} 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-3" id="courselisting"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Courses</h3> 
        </div> 
        <div class="panel-body"> 
         <div class="list-group" id="courselistings"> 
          test 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-6" id="courseinfo"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Course Info</h3> 
        </div> 
        <div class="panel-body"> 
         <div class="list-group" id="courseinformation"> 

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

（我沒有做過courseinfo面板的東西還沒有，我只是包含它，以便將列正確對齊。）

來源

2014-03-05 Blake Stoddard

在這裏提出了一個類似的問題和解決方案：http://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript – jamesy829

我問這個問題之前問這個問題一個，並沒有看到它如何幫助我回答？ –

你應該有一種方法來觸發showDetail方法，可能會將鏈接或按鈕設置爲ng-click來觸發方法 – jamesy829

不，它不會工作。

您需要使用模板或指令。

http://docs.angularjs.org/guide/directive

您簡單的移動innerHTML的字符串指令模板

.directive('myCustomer', function() { 
    return { 
    scope: { 
      subject: '=' 
    }, 
    template: '<string here>' 
    }; 
});

而且使用它像

<my-customer subject="xxx"/>

來源

2014-03-05 02:22:56

一個指令是對你更好的答案。 DOM操作應該在指令中完成，而不是控制器。

也就是說，使用Angular的$compile可以讓Angular知道新的HTML。

正如concept-這裏的證據是該函數（和working fiddle）：

$scope.showDetail = function (todo) { 
    var html= '<div><a ng-repeat="course in subjects['+todo+'].courses" class="list-group-item" target="#courseinformation" ng-click="showDetail(course)">{{course.coursesub}}</a></div>'; 
    var innerHTML =$compile(html)($scope) 
    var currente = angular.element(document.getElementById("courselistings")); 

    currente.replaceWith(innerHTML); 
}

爲了這個工作，我們還需要在要顯示該課程的指數來傳遞 - ng-click="showDetail($index)"。這是因爲$compile將根據控制器範圍進行編譯，而不是ngRepeat中的那個。

正如你所看到的，它需要跳過許多環節才能完成這項工作 - 這是指令更好的一部分。

來源

2014-03-05 03:20:48 KayakDave

innerHTML函數中的ng-repeat？

回答

相關問題