자바 스크립트를 통해 각도 값 모델 값을 설정하십시오.

본 사이트에서 많은 답변/질문을 검토 한 결과 아무 것도 내 문제를 해결하지 못했습니다. 내가 틀렸다면 사과드립니다. 다음과 같이 내가 그들을 표시자바 스크립트를 통해 각도 값 모델 값을 설정하십시오.

items = { 
    a: "apple", 
    b: "banana" 
}; 

lines = [ 
    {key: "a"}, 
    {key: "b"}, 
    {key: "b"}, 
    {key: "a"} 
];

: Sample Code

두 객체를 고려 : 내 코드와 그 동작을 볼 수 있도록 여기에

, 내 예에 대한 링크입니다

<div ng-repeat="line in lines"> 
    <div ng-click="clicked(items[line.key])"> 
     {{items[line.key]}} 
    </div> 
</div>

"lines"에는 반복되는 값이 들어 있고 항목은 고유 항목의 집합이라는 점에 유의하십시오.

사용자가 라인 중 하나를 클릭하면 라인 키가 가리키는 항목을 업데이트하는 입력 필드를 제공해야합니다. 그리고 입력을 통한 변경 사항이 자동으로 라인에 반영되도록 양방향 바인딩이 필요합니다. 항목에 대한 명시 적 참조를 사용 겨 모델

Input 1: <input ng-model="items.a"> 
Input 2: <input ng-model="mymodel">

입력 # 1 세트 : 내 샘플 (위의 링크 참조)에서

, 나는 두 개의 입력 태그를 추가했습니다. 입력 # 2는 $ scope 내에 존재하는 변수를 사용하여 ng-model의 값을 설정합니다.

<div ng-click="clicked(items[line.key])">

사용자가 NG 반복 통해 DIV (라인) 출력 클릭하면 mymodel의 값이 변경된다.

입력 1이 예상대로 작동합니다. 입력을 통해 이루어진 변경 사항은 생성 된 div 전체에 자동으로 반영됩니다.

입력 2는 사용자가 클릭 한 div 행의 동일한 모델에 대한 입력 요소의 NG 모델의 동적 바인딩입니다. 제공된 예제에서는 올바른 텍스트가 입력에 표시되지만 동일한 키가있는 div 행과 양방향 바인딩이 없습니다.

여기 내 전체 스크립트입니다

var myApp = angular.module("myApp",[]); 

myApp.controller("mainCtrl", function ($scope) { 
    $scope.items = { 
     a: "apple", 
     b: "banana" 
    }; 
    $scope.lines = [ 
     {key: "a"}, 
     {key: "b"}, 
     {key: "b"}, 
     {key: "a"} 
    ]; 
    $scope.mymodel = $scope.items.a; 

    $scope.clicked = function(key) { 
     $scope.mymodel = key; 
    }; 
});

을 그리고 여기 내 index.html을 수 있습니다 :

<!DOCTYPE html> 
<html> 
    <body ng-app="myApp" ng-controller="mainCtrl"> 
    Input 1: <input ng-model="items.a"> 
    Input 2: <input ng-model="mymodel"> 
    <div ng-repeat="line in lines"> 
     <div ng-click="clicked(items[line.key])">{{items[line.key]}}</div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> 
    <script src="script.js"></script> 
</body>

도움에 미리 감사합니다!

출처

2014-05-08 user1519054

존중 [도트 규칙 (https://www.google.com/#q=angularjs+dot+rule) 및 $ scope.mymodel''원시적보다는 객체를 사용한다. – Blackhole

ng-repeat가 각 반복마다 새로운 격리 범위를 생성한다는 사실을 알고 있습니까? – mortsahl

저는 이것을 알고 있습니다 만, 유스 케이스에 대한 해결책을 찾고 있습니다. 어떤 해결책을 제시 하시겠습니까? – user1519054

다음은 어떻게 수행할까요? mymodel 변수를 '키'값으로 만들고 해당 키를 통해 입력에 연결하십시오. Plunker

$scope.clicked = function(key) { 
    $scope.mymodel = key; 
};

그리고이에 HTML을 전환합니다.

Input 1: <input ng-model="items.a"> 
Input 2: <input ng-model="items[mymodel]"> 
<div ng-repeat="line in lines"> 
    <div ng-click="clicked(line.key)">{{items[line.key]}}</div> 
</div>

출처

2014-05-08 22:45:58

예 ... 그게 내가 성취하려고 시도한 것입니다. 감사! – user1519054

@ user1519054, 오른쪽에 사람. 행운을 빕니다! 만족 스럽다면 대답을 수락하십시오. –

자바 스크립트를 통해 각도 값 모델 값을 설정하십시오.

답변

관련 문제