Fatal编程技术网
  • javascript/
  • Javascript 数据绑定不起作用的两种方式

Javascript 数据绑定不起作用的两种方式

javascript angularjs

Javascript 数据绑定不起作用的两种方式,javascript,angularjs,angular-data,Javascript,Angularjs,Angular Data,我正在写一个简单的控制器，它很少计算。这是一个具有更高级信息的真实项目的反映。 问题是，当作为表达式放置在html上时，每次更改都会重新计算结果，但是，当我在$scope中作为变量计算时，它不会更新。请参见标记中的注释 你知道我在这里遗漏了什么吗 标记 <body ng-app="myApp"> <div ng-controller="mainController"> <h3> Numbers </h3> <label> a

我正在写一个简单的控制器，它很少计算。这是一个具有更高级信息的真实项目的反映。 问题是，当作为表达式放置在html上时，每次更改都会重新计算结果，但是，当我在$scope中作为变量计算时，它不会更新。请参见标记中的注释

你知道我在这里遗漏了什么吗

标记

<body ng-app="myApp"> 
<div ng-controller="mainController">
  <h3> Numbers </h3> 
  <label> a </label>
  <input type="number" ng-model="numbers.a"/>

  <label> b </label> 
  <input type="number" ng-model="numbers.b">
<br>
<br>
  <span> Result : {{result}} {{numbers.a*numbers.b}} </span> // the first one does not update, but the second does. 

  <h3> Nums </h3> 

    <label> a </label>
  <input type="number" ng-model="a1">

  <label> b</label> 
  <input type="number" ng-model="b1">

<br>  
  Result2:  {{result2}} {{a1+b1}}
<ul> 
  <li ng-repeat=" i in cool"> {{i}} </li>
  </ul>
  </div>
</body>

控制器中的计算仅在实例化控制器时执行，通常在显示相应视图时执行。您必须将计算封装在函数中（无需$watch）：

并在您的视图中引用它：

<span> Result : {{result()}} {{numbers.a*numbers.b}} </span>
以及：

  • {{i}
    •
    请参阅：

    控制器中的计算仅在实例化控制器时执行，通常在显示相应视图时执行。您必须将计算封装在函数中（无需$watch）：

    并在您的视图中引用它：

    <span> Result : {{result()}} {{numbers.a*numbers.b}} </span>
    以及：

  • {{i}
    •
    请参阅：

    控制器中的计算仅在实例化控制器时执行，通常在显示相应视图时执行。您必须将计算封装在函数中（无需$watch）：

    并在您的视图中引用它：

    <span> Result : {{result()}} {{numbers.a*numbers.b}} </span>
    以及：

  • {{i}
    •
    请参阅：

    控制器中的计算仅在实例化控制器时执行，通常在显示相应视图时执行。您必须将计算封装在函数中（无需$watch）：

    并在您的视图中引用它：

    <span> Result : {{result()}} {{numbers.a*numbers.b}} </span>
    以及：

  • {{i}
    •
    请参阅：

    更改数字时，您需要一块手表来重新计算结果值。否则，
    result
    的值只计算一次

    var-app=angular.module（'my-app'，[]，function（）{}）
app.controller（'mainController'，['$scope'，
职能（$范围）{
$scope.number={
a:11，
b:10
};
$scope.a1=5；
$scope.b1=7；
//如果a或b更改，请重新计算结果
$scope.$watch（“[numbers.a，numbers.b]”，function（）{
$scope.result=$scope.numbers.a*$scope.numbers.b；
})
//如果a1或b1发生变化，则重新计算结果2
$scope.$watch（“[a1，b1]”，function（）{
$scope.result2=$scope.a1+$scope.b1；
})
//如果结果或结果2发生更改，请重新计算冷却
$scope.$watch（“[result，result2]”，function（）{
$scope.cool=[$scope.result+$scope.result2，
$scope.result-$scope.result2
]
})
}
]);

    
数字
A.
B

    

    
结果：{{Result}{{numbers.a*numbers.b}//第一个不更新，但第二个更新。
努姆斯
A.
B

    Result2:{{Result2}}{{a1+b1}

      

    • {{i}
      • 

    

    更改数字时，您需要一块手表来重新计算结果值。否则，
    result
    的值只计算一次
    


    var-app=angular.module（'my-app'，[]，function（）{}）
app.controller（'mainController'，['$scope'，
职能（$范围）{
$scope.number={
a:11，
b:10
};
$scope.a1=5；
$scope.b1=7；
//如果a或b更改，请重新计算结果
$scope.$watch（“[numbers.a，numbers.b]”，function（）{
$scope.result=$scope.numbers.a*$scope.numbers.b；
})
//如果a1或b1发生变化，则重新计算结果2
$scope.$watch（“[a1，b1]”，function（）{
$scope.result2=$scope.a1+$scope.b1；
})
//如果结果或结果2发生更改，请重新计算冷却
$scope.$watch（“[result，result2]”，function（）{
$scope.cool=[$scope.result+$scope.result2，
$scope.result-$scope.result2
]
})
}
]);

    
数字
A.
B

    

    
结果：{{Result}{{numbers.a*numbers.b}//第一个不更新，但第二个更新。
努姆斯
A.
B

    Result2:{{Result2}}{{a1+b1}

      

    • {{i}
      • 

    

    更改数字时，您需要一块手表来重新计算结果值。否则，
    result
    的值只计算一次
    


    var-app=angular.module（'my-app'，[]，function（）{}）
app.controller（'mainController'，['$scope'，
职能（$范围）{
$scope.number={
a:11，
b:10
};
$scope.a1=5；
$scope.b1=7；
//如果a或b更改，请重新计算结果
$scope.$watch（“[numbers.a，numbers.b]”，function（）{
$scope.result=$scope.numbers.a*$scope.numbers.b；
})
//如果a1或b1发生变化，则重新计算结果2
$scope.$watch（“[a1，b1]”，function（）{
$scope.result2=$scope.a1+$scope.b1；
})
//如果结果或结果2发生更改，请重新计算冷却
$scope.$watch（“[result，result2]”，function（）{
$scope.cool=[$scope.result+$scope.result2，
$scope.result-$scope.result2
]
})
}
]);

    
数字
A.
B

    

    
结果：{{Result}{{numbers.a*numbers.b}//第一个不更新，但第二个更新。
努姆斯
A.
B

    Result2:{{Result2}}{{a1+b1}

      

    • {{i}
      • 

    

    更改数字时，您需要一块手表来重新计算结果值。否则，
    result
    的值只计算一次
    


    var-app=angular.module（'my-app'，[]，function（）{}）
app.controller（'mainController'，['$scope'，
职能（$范围）{
$scope.number={
a:11，
b:10
};

    <li ng-repeat=" i in cool(result, result2)"> {{i}} </li>

    

    angular.module('myApp',[])

.controller('mainController', ['$scope', function($scope) {
  // ...
  $scope.$watch('[numbers.a, numbers.b]', function () {
    $scope.result = $scope.numbers.a*$scope.numbers.b;
  });

}]);

    

    {{ calculateResult() }}

    

    angular.module('myApp',[])

.controller('mainController', ['$scope', function($scope) {
  // ...
  $scope.calculateResult = function () {
    return $scope.numbers.a*$scope.numbers.b;
  };

}]);