根据angularJS中下拉框中选择的值更改数据

时间:2014-10-09 10:18:18

标签: javascript jquery html angularjs

我有一个下拉列表,我可以从中选择两个值并显示相应的值,但不是数据,而是要显示 div标记中的数据。

这是Fiddle Demo

HTML:

<div ng-controller="Ctrl">
    <select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data"></select>
    <p>$scope.list_category: {{list_category}}</p>
</div>

JS:

var app = angular.module('app', []);

function Ctrl($scope) {
    $scope.list_categories = {
        data: [{
            id: 'id1',
            name: 'name1'
        }, {
            id: 'id2',
            name: 'name2'
        }]
    };
    $scope.list_category = 'id1';
}

1 个答案:

答案 0 :(得分:0)

您可以使用ng-include。要包含网址或模板文件中的数据。

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.url as obj.name for obj in list_categories.data"></select>

<div ng-include='list_category'></div>

function Ctrl($scope) {
    $scope.list_categories = {
        data: [{
            id: 'id1',
            name: 'name1',
            url : 'template1.html'
        }, {
            id: 'id2',
            name: 'name2',
            url : 'template2.html'
        }]
    };
    $scope.list_category = 'template1.html';
}