새 변수에서 각도 변수로 변경 - 계산된 변수

새 변수에서 각도 변수로 변경 - 계산된 변수

녹아웃에서 앵귤러로 이동하는데 몇 가지 문제가 있습니다.저는 제가 분명 비각형 방식으로 무언가를 하고 있을 거라고 생각하고 있습니다.

http://jsfiddle.net/LostInDaJungle/BxELP/

I linked to jsfiddle so I didn't have to include my code here
Stack Overflow will not let me post my question without a code block.

여기에 내 주요 문제 두 가지를 정리한 아주 기본적인 바이올린 연주가 있습니다.

문제 1: val1과 val2는 3과 4로 초기화되고, 7까지 적절히 더합니다.그러나 텍스트 상자에 있는 값 중 하나를 변경하면 새 값은 문자열로 처리되고 덧셈 대신 연결됩니다.val1을 4로 바꾸면 8일 때 44가 나옵니다.이 행동을 해결하는 가장 좋은 방법은 무엇입니까?

문제 2: 계산된 필드.{{val1 + val2}}와 같은 곱슬곱슬한 괄호를 사용하여 계산된 필드를 얻을 수 있고 기본 모델이 변경되면 계산된 필드를 자동으로 업데이트할 수 있지만 이는 전혀 허용되지 않습니다.본격적인 앱에서 우리는 여러 번 사용하는 '비용'을 생성하고 매번 비용 계산을 넣어야 하는 것이 골칫거리입니다.이 계산이 바뀌면 비용 계산을 사용하는 15개의 다른 장소를 찾아서 모두 업데이트해야 하는 귀찮은 일은 말할 것도 없습니다.

또한 입력에 curly bracket으로 ng-model="cost"를 넣으려고 하면 curly bracket이 작동하지 않습니다.따라서 비용을 구속하는 방법으로는 아무것도 눈에 띄지 않습니다.

http://jsfiddle.net/LostInDaJungle/QNVwe/

이 예시는 제가 원하는 구조와 더 유사합니다.그러나 ko.observable과 달리 계산된 필드는 생성되는 값이 변경될 때 업데이트되지 않습니다.모두가 내게 제기한 보일러 플레이트 해결책은 많은 ng-change 핸들러를 쓰는 것입니다.하지만 그건 끔찍합니다.폭 변경으로 비용이 변경되고 페이백 계산 등이 변경되는 경우...순식간에 뒤엉킨 난장판이 됩니다.

이 두 가지 방법 모두 논리를 프레젠테이션에서 분리하는 데 실패합니다.메소드 1은 내 HTML에 비즈니스 로직을 내장합니다. 메소드 2는 ng-change 핸들러를 내 코드에 많이 넣는데, 이는 일반 ol' HTML로 Change 핸들러를 전체 엉망으로 써야 하는 것과 크게 다르지 않습니다. 만약 내가 ng-change 핸들러를 많이 해야 한다면,최소한 프레젠테이션 계층 밖에서 선언할 수 있기 때문에 자바스크립트로 onChange 핸들러를 바로 하겠습니다.

다음은 같은 내용의 녹아웃 버전입니다.

http://jsfiddle.net/LostInDaJungle/eka4S/2/

이건 내가 기대했던 것과 비슷하네요...내 입력에 대한 데이터 바인딩, 보기 모델 내에 잘 포함된 모든 프로그램 로직.또한, 제 계산 가능한 것이 자바스크립트 함수이기 때문에 두 값이 숫자인지 확인하는 방법에 대해 머리를 긁적일 필요가 없습니다.

그래서..

계산 변수:기본 변수를 보고 계산된 양을 자동으로 업데이트하는 방법이 있습니까?HTML에 프로그램 논리를 저장하지 않아도 됩니까?

제 번호가 문자열로 바뀌는 것을 방지할 수 있는 좋은 방법이 있을까요?

도와주셔서 고맙습니다.

참고로 Google Groups: https://groups.google.com/forum/ #!topic/angular/0dfnDTaj8tw에도 게시됨

계산된 필드의 경우 컨트롤러에 메서드를 추가합니다. . .

$scope.cost = function() { return $scope.val1 + $scope.val2 };

직접 묶는 겁니다구성 값이 변경됨에 따라 재계산이 필요한 시점을 알 수 있습니다.

<div>{{cost()}}</div>

네 알겠습니다,

몇 시간 후에 답이 온 것 같습니다.

$scope을 사용합니다.$시계.

$scope.$watch('(height * width) * 40', function(v) {$scope.cost = v;});

아니면

$scope.$watch('height + width', function() {$scope.cost = (Number(height) * Number(width)) * 40;});

이렇게 하면 감시된 변수에 대한 모든 계산값이 자동으로 업데이트됩니다.그리고 이것은 저에게 곱슬곱슬한 괄호 안에서 살 필요 없이 이것들로 일할 수 있는 방법을 줍니다.

또한 계산된 값을 재사용하고 계단식 업데이트를 위해 추적할 수 있습니다.

$scope.$watch('height * width', function(v) {$scope.dim = v;});
$scope.$watch('dim * 40', function(v) {$scope.cost = v;});

따라서 높이 및/또는 폭이 변경되면 dim이 업데이트되고 dim이 변경되었기 때문에 비용이 업데이트됩니다.

세번째 입력을 다음으로 변경했습니다.

<input type="text" value="{{val1 * 1 + val2}}" />

이로 인해 Angular.js가 문자열이 아닌 숫자로 값을 처리하게 됩니다.

음정은 여기 있습니다.저는 여기서 답을 얻었습니다.

문제 1 정보:

가능한 경우 입력 유형="number"를 사용해야 합니다.그렇게 하면 숫자 파싱을 제대로 할 수 있을 겁니다.오래된 브라우저 각도를 가지고 있더라도 숫자로 포맷하는 것을 처리할 것입니다.

문제 2 정보:

당신이 화면에 간단한 텍스트만 보여주면 된다면 당신의 대답은 좋은 제이슨입니다.그러나 모델이 있는 입력을 임의의 식에 바인딩하려면 다른 것이 필요합니다.

ng-model을 원하는 식에 바인딩하는 데 사용할 수 있는 지침을 작성했습니다.식을 변경할 때마다 모형이 새 값으로 설정됩니다.

module.directive('boundModel', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      scope.$watch(attrs.boundModel, function(newValue, oldValue) {
        if(newValue != oldValue) {
          ngModel.$setViewValue(newValue);
          ngModel.$render();
        }
      });
    }
  };
})

다음과 같이 템플릿에 사용할 수 있습니다.

<input type="text" ng-model="total" bound-model="value1 + value2">

또는 이와 같은 경우:

<input type="text" ng-model="total" bound-model="cost()">

여기서 cost()는 다음과 같은 스코프의 간단한 함수입니다.

$scope.cost = function() { return $scope.val1 + $scope.val2 };

좋은 점은 입력에 모델을 계속 사용하고, 각도가 잘 작동하지 않는 가치 속성을 동적으로 업데이트할 필요가 없다는 것입니다.

앵귤러는 처음입니다.JS 하지만 저는 $parse를 사용할 수 있다고 생각합니다.

http://docs.angularjs.org/api/ng/service/$parse

문자열이라는 표현이 있으면 재미있습니다.속성 경로를 사용할 수 있으며 해당 문자열을 동적으로 생성할 수 있습니다.컴파일 시 수식을 모르는 경우에는 eval()과 많이 비슷하지만 훨씬 빠르고 안전(?)할 수도 있습니다.

예는 다음과 같습니다.

function Ctrl($scope,$parse) {
  var expression = 'model.val1 + model.val2';//could be dynamically created
  $scope.model = {
    val1: 0,
    val2: 0,
    total: function() { 
        return ($parse(expression))($scope); 
    }
  };
}

함수에 바인딩할 수 있습니다.

function CTRL ($scope) {
$scope.val1 = 3;
$scope.val2 = 4;
$scope.sum = function(){
   return ($scope.val1 *1 + $scope.val2 *1);
};

}

바인딩 표현은 동일하게 작동하지만 훨씬 더 복잡한 경우에는 기능이 필요합니다.

제 생각에는 $scope 변수를 통해 제공되는 $watch 기능이 이 업무에 가장 적합합니다.

$scope.$watch(function(scope) { return scope.data.myVar },
              function(newValue, oldValue) {
                  document.getElementById("myElement").innerHTML =
                      "" + newValue + "";
              }
             );

$watch 기능은 a: value 기능과 listener 기능을 포함합니다.

위의 예는 이 멋진 기사에서 따온 것입니다: http://tutorials.jenkov.com/angularjs/watch-digest-apply.html

그것을 읽고 많은 것을 배웠고 내가 찾던 해결책을 실행할 수 있었습니다.

언급URL : https://stackoverflow.com/questions/17173768/new-to-angular-computed-variables