Murali Murali - 1 year ago 101
AngularJS Question

Angular ui tree is not working in mozilla

Plunker.

The above plunker is working fine in Chrome and IE. But When comes to Mozilla Firefox it is not.

When I try to select the dropdown the page is reloading.How to stop that issue.

<script type="text/ng-template" id="items_renderer.html">
<div ui-tree-handle>

<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
<input type="text" style="display:none" ng-model="item.rowId">
<input type="text" id="componentName{{$index}}" ng-style="getWidth(item.rowId)" ng-change="validateOnChange(item.componentName, 'componentName','',$index)" ng-model="item.componentName" style="width:156px;height: 23px;">
<input type="text" id="componentIdentification{{getRowId(item.rowId)}}" ng-model="item.componentIdentification" ng-change="validateOnChange(item.componentIdentification,'componentIdentification', '',getRowId(item.rowId))" style="width:125px;height: 23px;">
<select ng-model="item.componentType" id="componentType{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentType, 'componentType', 'Select', getRowId(item.rowId))" style="width:102px;height: 23px;">
<option>Select</option>
<option ng-repeat="type in typeList" value="{{type.TYPE_ID}}">{{type.COMPONENT_TYPE}}</option>
</select>
<select ng-model="item.componentState" id="componentState{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentState,'componentState', 'Select' ,getRowId(item.rowId))" style="width:122px;height: 23px;">
<option>Select</option>
<option ng-repeat="list in statusList" value="{{list.STATUS_ID}}">{{list.STATUS}}</option>
</select>
<select ng-model="item.actionId" id="actionId{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionId, 'actionId', 'Select',getRowId(item.rowId))" style="width:103px;height: 23px;">
<option>Select</option>
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
<select ng-model="item.actionToPerform" id="actionToPerform{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionToPerform, 'actionToPerform', 'Select',getRowId(item.rowId))" style="width:122px;height: 23px;">
<option>Select</option>
<option ng-repeat="actionPerform in actiontoperformList" value="{{actionPerform.ACTIONPERFORM_ID}}">{{actionPerform.ACTION_TO_PERFORM}}</option>
</select>

Answer Source

you need to remove the ng-model from the ui-tree-nodes div.

change this

<ol ui-tree-nodes ng-model="componentList">

to this

<ol ui-tree-nodes>

Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download