我需要像這樣的設計在anguarjs

-4

需要設計顯示第一個國家名單（州和地區名單應該隱藏），當我點擊特定的國家，並擴大關於國家名單的列表（例如，如果我們採取印度，我們，英國國家和我點擊印度和它顯示屬於印度的狀態列表），如果我點擊擴大特定狀態，並擴大屬於特定狀態的區域列表。我需要像這樣的設計在anguarjs

<div style="border: 1px solid blue; width: 50%; height: 50%"> 
      <div> 
       <ul ng-repeat="country in treedata.countrieslist"> 
        <li> 
         <button ng-show="!country.isExpanded" ng-click="country.isExpanded=!country.isExpanded">+</button> 
         <button ng-show="country.isExpanded" ng-click="country.isExpanded=!country.isExpanded">-</button> 
         {{country.CountryName}} 
         <ul ng-repeat="state in treedata.getStateList(country.CountryId)" ng-show="country.isExpanded"> 
          <li> 
           <button ng-show="!state.isExpanded" ng-click="state.isExpanded=!state.isExpanded">+</button> 
           <button ng-show="state.isExpanded" ng-click="state.isExpanded=!state.isExpanded">-</button> 
           {{state.StateName}} 
           <ul ng-repeat="district in treedata.getDistrictList(state.StateId)" ng-show="state.isExpanded"> 
            <li>{{district.DistrictName}} 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div>

注：我使用ajax調用get方法從服務器檢索數據。請幫我出您寶貴的解決方案與angularjs

編輯：

$http.get('/ExpandView/GetCountriesList/').success(function (data) { 
      treedata.countrieslist = data; 
    }); 
    treedata.getStateList = function (id) { 
     $http.get('/ExpandView/GetStatesList/').success(function (data) { 
      treedata.states = data; 
     }); 
    } 

    $http.get('/ExpandView/GetDistrictsList/').success(function (data) { 
     treedata.districts = data; 
    }); 

    treedata.getStateList = function (id) { 
     return treedata.states.filter(function (p) { 
      return p.CountryId == id; 
     }); 
    } 
    treedata.getDistrictList = function (id) { 
     return treedata.districts.filter(function (p) { 
      return p.stateid == id; 
     }); 
    }

此功能不能正常工作。請建議我。

來源

2015-08-21 Jagan

我檢舉這個題外話，推薦一個教程。你要求我們基本上爲你翻譯代碼。你試過什麼了？您能否向我們提供您在AngularJS中使用的_any_（非僞）代碼？ – onebree

請點擊「編輯」並將其附加到您的_question_。也使用正確的代碼格式。我的國旗和downvote仍然站立，但 – onebree

@Jagan：請創建一個你做了什麼和你想要的小提琴。人們將能夠以這種方式更輕鬆地幫助你。 – mechanicals

-2

我已創建了一個樣本撥弄了你，你怎麼看這個國家的國家的情況會在角JS工作SEE HERE

所以確切的解決辦法是this one

來源

2015-08-21 15:51:26

我創建了小提琴http://jsfiddle.net/jhw9hn4o/ – Jagan

謝謝:)但我需要顯示像一個樹structre ...如果我點擊印度下印度顯示旁遮普邦和Amirthsir的狀態，不應該顯示其他國家 – Jagan

@Jagan好吧我已經做了同樣的方式看看這裏http://goo.gl/lQXEnn這將顯示樹狀結構 –

我需要像這樣的設計在anguarjs

回答

相關問題