$ scope var이 하위에 전파되지 않음

Question

항목 목록에서 항목을 클릭하면 ng-show="showInput=true"을 사용하는 입력 필드가 열립니다. showInput=false 설정, save 클릭 할 때

<div ng-app="myApp" ng-controller="Ctrl"> 
<li ng-click="showInput=true" ng-repeat="label in labels">{{label}} - ---> show  input = {{showInput}} 
    <form ng-show="showInput" > 
    <input type=text value={{label}}><button ng-click="saveDate()">save</button> 
    </form> 
</li> 
</div> 

그러나 양식이 숨어되지 않습니다

angular.module('myApp', []) 
.controller('Ctrl', ['$scope', function($scope) { 
    $scope.labels=["click a", "click b", "click c", "click d", "click e"]; 
    $scope.showInput = false; 

    $scope.saveData = function(){   
     $scope.showInput = false; 
    } 
    }]); 

나는이 부모/자식 범위 문제입니다 생각한다. 누구든지이 작업을 수행하는 방법을 지적 할 수 있습니까?

바이올린 : 요이보기에 <button ng-click="saveDate()">을 부여하고 컨트롤러에서 당신이 $scope.saveData로 함수를 호출 http://jsfiddle.net/supercobra/PUZzZ/

Answer 1

여기에 몇 가지 버그가 있습니다.

1. HTML에는 saveDate()가 아닌 saveData()를 작성해야합니다.

2. 의 (버튼 포함) 내의 요소를 클릭하면 showInput이 true로 설정됩니다.

3. 범위 내에서 순수한 JavaScript 개체를 다루고 있습니다. AngularJS Meetup you can see here에서 무엇을해야할지 묻는 질문이 있습니다. 최상의 솔루션은 객체를 사용하는 것처럼 보이므로 하위 객체와 부모 객체는 동일한 참조 객체를 사용합니다. 여기에

Look at this fiddle for my solution.

<div ng-app="myApp" ng-controller="Ctrl"> 
    <li ng-repeat="label in labels"> 
     <span ng-click="showInput[label] = true">{{label}}</span> - ---> show input = {{showInput}} 
     <form ng-show="showInput[label]" > 
     <input type=text value={{label}}><button ng-click="saveData(label)">save</button> 
     </form> 
    </li> 
</div> 


angular.module('myApp', []) 
    .controller('Ctrl', ['$scope', function($scope) { 
     $scope.labels=["click a", "click b", "click c", "click d", "click e"]; 
     $scope.showInput = {}; 

     $scope.saveData = function(label){   
      $scope.showInput[label] = false; 
     } 
    }]); 

이 작품 완벽하게 내가 (것 라벨 대신 안전한 상점을 핵심 시스템을 사용하여)을 수행 한 방법이다. 문제는 자식 변수 안에 $ scope 변수를 사용하면 부모가 저장할 때 변수에 액세스 할 수 없다는 것입니다. 당신을 해달라고 이유

Answer 2

. 오타 오류. 변경 $scope.saveData to $scope.saveDate

Answer 3

실제로 문제는 ng-repeat이 자체 범위를 만들고 사용자가 showInput을 무시한다는 것입니다.

이 상황에서 일반적으로하는 일은 현재 표시된 양식을 추적하고 this fiddle과 같이 전환 방법을 구현하는 것입니다. 이것은 컨트롤러 내에서 열린 양식을 추적하며 개인 정보에 액세스하는 메소드 (ng-repeat의 모든 하위 범위에만 해당)를 제공하는 $scope 객체는 추적하지 않습니다.

또한 saveData으로 전화를 걸면 입력 오류가 발생하지만 문제는 없습니다.

Answer 4

같은 것을 시도 :

언젠가 형태로 내부 NG 클릭하여

원하는 방식으로 작동 doesnot = "showInput = 거짓"> NG 클릭합니다. u는 입력 형식으로 시도 할 수도 있습니다 'submit' 또한 작업을 훨씬 쉽게 만듭니다.