从innerHTML函数内ng-repeat? [英] ng-repeat from within innerHTML function?

问题描述

我有3栏.第一个列出了数组中的主题列表.在该阵列中，每个科目都有其内列出的特定课程，并在其中列出了其余的课程信息.

I have 3 columns. The first lists a list of subjects from an array. Within that array, each subject has it's particular courses listed within, and within that, the rest of the course information.

如果使用.innerHTML函数放置ng-repeat函数"，我是否可以正常运行?

Can I have the ng-repeat "function" operate properly if it is placed using a .innerHTML function?

我可能使用了错误的标识符来尝试从数组中调用内容，这也可能导致我的问题.

I could be using the wrong identifiers to try and call content from the array, which could also be causing my problems.

范围:

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

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面板的内容，只是添加了它，以便各列正确对齐.

I haven't done the courseinfo panel stuff yet, I just included it so that the columns would align properly.

推荐答案

不，它不起作用.

您需要使用模板或指令.

You need to use template or directive.

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

您只需将innerHTML字符串移动到指令模板

You simple move innerHTML string to directive template

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

并像使用它

<my-customer subject="xxx"/>

这篇关于从innerHTML函数内ng-repeat?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！