2014-10-29 4 views
0

Lodash가 findWhere를 사용하여 객체를 가져 오는 이유를 이해할 수 있도록 도와 줄 수 있습니까? 전체 변수를 범위에 바인딩하고 사용자 작업에 따라 동적으로 변경할 수있는 참조 사본이 있습니다. copy 연산자를 사용하여 수행 할 때와 동일한 작업으로 원본 개체를 업데이트하지 못합니다. 나는 plunker 을 뒀다 http://plnkr.co/edit/Phy5xQnGBYsBnenMQHOd?p=previewLodash 이해 - 자바 스크립트의 찾기 및 복사 연산자

HTML 코드 :

<html ng-app="angularjs-starter"> 

    <head lang="en"> 
    <meta charset="utf-8" /> 
    <title>Custom Plunker for service response data binding</title> 
    <script data-require="[email protected]" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <input type="text" data-ng-model="inputModel" /> 
    <input type="text" data-ng-model="inputModel2.desc" /> 
    <button data-ng-click="btnClick()">Click me and check console</button> 
    </body> 

</html> 

JS 코드 :

var app = angular.module('angularjs-starter', []); 

app.controller('MainCtrl', function($scope,$http) { 
    var someServiceResponse = [{"code":"1","desc":"apple"},{"code":"2","desc":"orange"}]; 
    $scope.inputModel = someServiceResponse[0].desc; 
    $scope.inputModel2 = _.findWhere(someServiceResponse,{'code':'2'}); 
    $scope.btnClick = function(){ 
    console.log($scope.inputModel);//Outputs the changed value in the text box1 
    console.log($scope.inputModel2.desc);//Outputs the changed value in the text box2 
    console.log(someServiceResponse[0].desc); // Still shows the old value from the service response - always shows apple 
    console.log(someServiceResponse[1].desc); // shows updated value from second text box 
    }; 
}); 
+0

나를 위해 마지막 두 console.log는 항상 사과와 오렌지색을 표시합니다. – Absor

+0

Absor - 사과! 내 잘못이야. 나는 plunker뿐만 아니라 질문을 업데이트했다. – WiseWins

+1

inputModel은 문자열에 대한 참조이며 업데이트 된 경우 참조가 새 문자열로 설정됩니다. inputModel2는 객체에 대한 참조이며 내부에서 desc 문자열을 업데이트합니다. – Absor

답변

1

배경 :

서비스가 변수 객체 오브젝트 1을 가지고, 오브젝트 1가있다 문자열에 대한 참조 인 변수 String2.

Object1은 메모리 위치 1을 가리키고, 변수 String2는 문자열이 들어있는 메모리 위치 2를 가리 킵니다.

Object = {} 
Object1.String2 = "" 
Object1 -> 1 
Object1.String2 -> 2 

사례 1 :

컨트롤러는 서비스에서 요구되는 Object1.String2로 설정되는 변수 String3 있습니다.

문자열 3은 문자열을 포함하는 메모리 주소 2를 가리 킵니다.

컨트롤러는 새 데이터가 뷰에서 오는 경우 String3 값을 변경합니다. String3은 이제 메모리 위치 3을 가리 킵니다. Object1 변수 String2는 Object1 변수를 수정하지 않았으므로 여전히 2를 가리키며 변수 String3을 수정했습니다.

String3 = Object1.String2 
String3 -> 2 
Object1 -> 1 
Object1.String2 -> 2 

String3 = "changed" 
String3 -> 3 
Object1 -> 1 
Object1.String2 -> 2 

사례 2 :

컨트롤러는 서비스에서 요구되는 오브젝트 1로 설정되는 변수 Object2 있습니다.

Object2는 이제 개체가 들어있는 메모리 주소 1을 가리 킵니다.

컨트롤러는 새 데이터가 뷰에서 오는 경우 Object2.String2 값을 변경합니다. Object2.String2는 이제 메모리 위치 3을 가리 킵니다. Object2는 Object1을 참조하여 Object1.String2가 메모리 위치 3을 가리 키도록 실제로 수정되었습니다. 서비스에 Object1에 대한 참조가 있으므로 실제로 서비스에 업데이트됩니다.

Object2 = Object1 
Object2 -> 1 
Object1 -> 1 
Object1.String2 -> 2 

Object2.String2 = "changed" 
Object2 -> 1 
Object1 -> 1 
Object1.String2 -> 3