使用AngularJS重新绑定树(Wijmo树)

时间:2013-09-07 21:22:18

标签: angularjs angularjs-scope angularjs-ng-repeat wijmo angularjs-controller

我是AngularJS的新手,并且正在努力重新绑定一个Wijmo树(甚至是使用UL和LI元素实现重复的树)以及关于改变Wijmo组合框的值的新数据(或者,甚至HTML的常规下拉选择elem)。 下面是我编写的代码,它在初始页面加载时工作正常。但是在更改dropwdown时,树不会被loadDomainTree方法获取的新数据重新加载;它仍然显示旧数据。有人可以帮我弄清楚这段代码有什么问题吗?

HTML:

<div ng-controller="DomainCtrl">
    <select id="domain" ng-model="currentDomain" ng-options="item.Name for item in domainList"></select>
    <div>
        <ul id="wijtree">
            <li ng-repeat="item in domainEntityList" id={{item.Id}}>
                <a>{{item.Name}}</a>
            </li> 
        </ul>
    </div>                                                      
</div> 

JS:

$(document).ready(function ()
{
    $("#domain").wijcombobox({
        isEditable: false
    });

    $("#wijtree").wijtree();
});

function DomainDropdownModel(data) {
    this.Id = data.Id.toString();
    this.Name = data.Name;
};

function DomainTreeModel(data) {
    this.Id = data.Id;
    this.Name = data.Name;
};

function DomainCtrl($scope, $locale) {
    $scope.domainList = [];

    $.ajax({
        url: dropDownUrl,
        async: false,
        success: function (data) {
            $(data).each(function (i, val) {
                var domain = data[i];
                var domainId = domain.Id.toString();
                var domainName = domain.Name;
                $scope.domainList.push(new DomainDropdownModel({ Id: domainId, Name:  domainName }));
            });
        }
    });

    $scope.currentDomain = $scope.domainList[0];

    $scope.loadDomainTree = function (domainId) {
    domainEntitiesUrl = DOMAIN_API_URL + DOMAIN_ID_PARAM + domainId;
    //alert(domainEntitiesUrl);
    $scope.domainEntityList = [];
    $.ajax({
        url: domainEntitiesUrl,
        async: false,
        success: function (data) {
            $(data).each(function (i, entity) {
                var domainEntity = data[i];
                var domainEntityId = domainEntity.Id.toString();
                var domainEntityName = domainEntity.Name;
                $scope.domainEntityList.push(new DomainTreeModel({ Id: domainEntityId, Name: domainEntityName }));
                });
            }

        });
    };

    //Will be called on setting combobox dfault selection and on changing the combobox
    $scope.$watch('currentDomain', function () {
        $scope.loadDomainTree($scope.currentDomain.Id);
    });
}

1 个答案:

答案 0 :(得分:0)

您可以$监视WijCombobox的selectedItem,然后相应地重新加载wijtree。这是代码:

$scope.$watch('selectedItem', function (args) {
        if (args === 'Tree 1') {
                $("#wijtree").wijtree("option", "nodes", $scope.nodes1);
            }
            else {
                $("#wijtree").wijtree("option", "nodes", $scope.nodes2);
            }
   });

HTML代码

<wij-combobox data-source="treeList" selected-value="selectedItem">
            <data>
                <label bind="name"></label>
                <value bind="code"></value>
            </data>
 </wij-combobox>