Angularjs 컨트롤러를 클릭하여 내 html을 업데이트하는 방법

json 데이터에서 업데이트해야하는 html 구조가 있습니다. 내 Json 데이터가 컨트롤러에 있습니다. json 데이터를 읽고 html로 해당 div에 넣을 ng-click 이벤트에 대한 표현식을 작성해야합니다. 그러나 나는 이것을 달성하는 방법을 확신하지 못한다.Angularjs 컨트롤러를 클릭하여 내 html을 업데이트하는 방법

아래는 내가 지금까지 가지고있는 것입니다.

<body data-ng-app> 
    <div class="container" data-ng-controller="UpdateDataCtrl"> 
     <div class="inner1"></div> 
     <div class="inner2"></div> 
    </div> 
    <a href="javascript:void(0)" ng-click="not sure how to get json here">UPdate Controllers</a> 
</body> 


function UpdateDataCtrl($scope) { 
     $scope.data = [ 
      { 
       "USA":"Eglish", 
       "Pop":"232423432432" 
      }, 
      { 
       "France":"French", 
       "Pop":"1212323432" 
      }, 
      { 
       "Spain":"Spainish", 
       "Pop":"3432432" 
      } 
     ] 
    }

클릭 할 때마다 2 Div가 json에서 업데이트되어야합니다. 첫 번째 div에는 미국 --- 영어 Pop --- 2342234232가 있어야하고 다음에 div에 프랑스의 데이터가 있어야합니다.

http://jsfiddle.net/MBFpD/1/

감사

출처

2013-09-26 Mike

당신이 AngularJS와의 개념에 불분명 것으로 보인다. DIV를 업데이트하고 싶지는 않습니다. 모델을 참조한 다음 모델의 데이터를 변경하려고합니다. 이 같은 사업부 쓸 수 있습니다 예를 들어

: 컨트롤러에서 다음

<div class="inner1">Population: {{data[dataindex].Pop}}</div>

당신은 0으로 dataindex를 초기화하는이 출력됩니다 그래서 배열의 첫 번째 항목에서 인구 :

$scope.dataindex = 0;

클릭 기능 (컨트롤러에 의해 관리되는 블록 내부의 ng : 클릭과 링크가 있어야합니다!)은 dataindex를 1 씩 증가시킬 수 있으며, 배열의 끝이 0 일 때 다시 0으로 다시 시작합니다. 도달했습니다. 여기

$scope.click = function() { 
    $scope.dataindex = ($scope.dataindex+1) % $scope.data.length;

업데이트 된 행동의 모든 것을 보여줄 것이다 당신의 예제의 jsfiddle 수정 :

$scope.update = function() { 
    $scope.data = data; //your array defined locally to the scope 
};

ng-repeat : 당신이 링크를 클릭 할 때 범위에 데이터 바인딩 http://jsfiddle.net/MBFpD/2/

출처

2013-09-26 19:42:34

덕분에 유용한 이잖아. dataindex 무엇입니까? angularjs에 키워드입니까? – Mike

아니요, 배열 인덱스로 사용 된 다음 클릭 할 때마다 증가하는 또 다른 변수입니다. –

감사합니다. 나는 너에게 대접을해야만한다 ... 은 다음과 같다. angular $ scope.dataindex = 0; – Mike

을 범위에 바인딩 된 데이터; 배열의 크기가> 0 인 경우 컨테이너를 표시하십시오.

루프 내에서 반복 변수를 얻으려면 {{index}}을 사용하십시오.

무엇보다도 ng-controller 상단을 선언하여 ng-repeat과 ng-click을 묶으십시오. 그렇지 않으면 AngularJS는 당신이 달성하기를 원하는 것을 추측 할 수 없습니다.

http://jsfiddle.net/MBFpD/5/

출처

2013-09-26 19:47:26 roland

Angularjs 컨트롤러를 클릭하여 내 html을 업데이트하는 방법

답변

관련 문제