AngularJS : 선택 컨트롤을 기반으로 한 템플릿 결정

이 프로젝트에서 범위 크립/변경으로 인해 루프가 발생했습니다.AngularJS : 선택 컨트롤을 기반으로 한 템플릿 결정

초기에는 페이지에 6 개의 버튼이 있었으며 (다른 것들과 함께) 6 개의 다른 새로운 추가 ... 양식으로 연결되는 경로가있었습니다. 나는 모든 버튼을 노선에 연결하고 작동 시켰습니다.

금요일에 UIX 지도자는 방문 페이지가 너무 복잡하고 사용자가 올바른 양식을 선택할 수있는 드롭 다운으로 이어지는 단일 "ADD NEW REQUEST"버튼이 필요하다는 것을 이해 관계자들에게 확신 시켰습니다.

그래서 내 템플릿은 다음과 같습니다

<form> 
    <div class="row"> 
     <div class="form-group col-lg-12"> 
      <label for="requestType">What type of request would you like to create? 
       <span class="required">*</span> 
      </label> 
      <select class="form-control" name="requestType" ng-model="requestType" ng-change="new_form_select()"> 
       <option value="0">Please Select ...</option> 
       <option value="1">IT Web Task</option> 
       <option value="2">SAP Task</option> 
       <option value="3">Email Campaign</option> 
       <option value="4">Third Party Suppression</option> 
       <option value="5">Report Request</option> 
       <option value="6">Other/I'm Not Sure</option>       
      </select> 
     </div> 
     </div> 
     </form>

내가 webtask.html, saptask.html, campaign.html, suppression.html, report.html, generalrequest.html의 템플릿을 가지고있다.

내가 이걸 가지고있을 때 나는 다음에 무엇을해야하는지 실마리가 없다는 것을 깨달았습니다. 같은 양식의 모든 양식을 숨기고 선택 항목을 기반으로 표시해야합니까 (아니면 할 수 있습니까?) 또는 페이지 이동 메뉴의 선택 정렬을 선택하고 해당 양식을 선택하면로드해야합니까 (할 수 있습니까? 그 컨트롤러에?)

OMG, 나는 길을 잃었다!

말할 필요도없이, 이것은 내 첫 번째 각도 프로젝트입니다 ... 나는 순수한 jQuery를 사용했고 AngularJS를 배우고있었습니다.

모든 안내는 대단히 감사합니다 !!!

출처

2014-04-14 jgravois

당신을 위해이 문제를 해결할 수 있지만 간단한 솔루션의 주요 단계를 안내 할 수 있습니다 방법은 당신의 선택 ng-에서 호출

이 angular-ui-router

에서보세요 변화는 선택 폼의 상태로 재 것이다 : 당신은 지금 상태를 정의하고 템플릿을 연결해야

<select class="form-control" 
     name="requestType" 
     ng-model="requestType" 
     ng-change="new_form_select()"> 

    <option value="0">Please Select ...</option> 
    <option value="webtask">IT Web Task</option> 
    <option value="saptask">SAP Task</option> 
    .... 
</select> 

$scope.new_form_select = function() { 
    if(requestType) { 
     location.href = '#/' + requestType; 
    } 
}

. 각도-UI-라우터는 그것의 문서의 몇 가지 예를 가지고 있지만 그것은 무언가 같이 될 것이다 :

.state('webtask', { 
    url: "/webtask", 
    templateUrl: "templates/webtask.html", 
    controller: function() { 

    } 
}) 
.state('saptask', { 
    url: "/saptask", 
    templateUrl: "templates/saptask.html", 
    controller: function() { 

    } 
}) 
// you get the idea..

는 이제 이러한 템플릿이 페이지에 배치됩니다 마크 업을 추가해야합니다. 다시 각도-UI-라우터는 몇이 작업을 수행 할 수있는 방법에 대한 예제가 : 당신이 당신의 메인 컨트롤러의 설정에 $ stateProvider, $ urlRouterProvider를 추가 할 필요가 물론
```
<body> 
     

     
    <div ui-view></div> 
</body> 
```

을하지만,이 모든입니다 Angular-UI-Router 페이지에서 설명합니다.

출처

2014-04-14 14:45:27

Angular-UI-Router가 아직 베타 버전이며 API가 변경 될 수 있다는 경고이므로이 솔루션으로 구현하는 것이 안전합니까? (나는 지난 밤에 그것에 대해 읽었고 아마도 각도 루트 세그먼트 (Angular-Route-Segment)를 가능성으로 보았습니다 ... 나는 이것을 위해 누군가를 찾고 있지 않습니다. 배워야하고 귀하의 의견을 감사해야합니다. – jgravois

대부분의 각형 플러그인은 다음과 같습니다. 베타 버전에서는 오랫동안 이렇게 남아있을 것입니다. 플러그인이 변경 될 우려가있는 경우 Angular가 변경 될 것이라는 두려움도 있어야합니다. 라이브러리/플러그인의 최신 버전을 사용하지 않아도됩니다. 보안 릴리스 및 심지어 그것은 다음에 따라 다릅니다.나만의 라우팅 플러그인을 만드는 것이 문제가되지 않으므로 (시간이 필요합니다) 이것이 최선의 선택이라고 생각합니다. –

AngularJS : 선택 컨트롤을 기반으로 한 템플릿 결정

답변

관련 문제