Question

我正在尝试组合两个angularjs表达式

 <div ng-app="">
    <p>Name :
    <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
 </div>

 <div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
 </div>

通过这样做：

 <div ng-app="ctrl">
            <p>Enter first numb:<input type="text" ng-model="firstnb"/></p>
            <p>Enter sec numb:<input type="text" ng-model="secnb"/></p>
            <p>Enter operator:<input type="text" ng-model="op"/></p>
          <p>  Result is : {{firstnb}} &nbsp; {{op}} &nbsp; {{secnb}}  = </p>
        </div>

但在计算结果之前我在浏览器上得到这个：

我是棱角分明的小伙子，我不知道为什么我得到的结果请注意：<script src="js/angular.min.js"></script>已完全加载

Answer 1

当您使用ng-app="ctrl"时，您还必须为模块定义。另外我建议不要污染rootScope，而是使用控制器创建一个范围。

angular.module("ctrl",[]);

<强> DEMO

否则，您可以在没有模块名称的情况下使用ng-app。但建议使用module名称并使用angular.module进行定义。

 <div ng-app>
            <p>Enter first numb:<input type="text" ng-model="firstnb"/></p>
            <p>Enter sec numb:<input type="text" ng-model="secnb"/></p>
            <p>Enter operator:<input type="text" ng-model="op"/></p>
          <p>  Result is : {{firstnb}} &nbsp; {{op}} &nbsp; {{secnb}}  = </p>
        </div>

Answer 2

首先，您必须声明一个Angular应用并将其链接到您的HTML：

JS：

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

HTML：

<html ng-app="myApp">

然后，您必须将一个控制器添加到Angular应用程序并在HTML中使用它：

JS：

app.controller('myCtrl', function() {
    // Your code here
});

HTML：

<div ng-app="myCtrl">
    <p>Enter first numb:<input type="text" ng-model="firstnb"/></p>
    <p>Enter sec numb:<input type="text" ng-model="secnb"/></p>
    <p>Enter operator:<input type="text" ng-model="op"/></p>
    <p>  Result is : {{firstnb}} &nbsp; {{op}} &nbsp; {{secnb}}  = </p>
</div>

见工作JSFiddle

修改

我修改了我的JSFiddle（见上面的链接）以满足您的需求。在控制器中：

myApp.controller('MyCtrl', function($scope) { $scope.updateResult = function() { console.log($scope.op); switch($scope.op) { case '+': $scope.result = Number($scope.firstnb) + Number($scope.secnb) break; } }; });

我只实现了添加，但我相信你会知道如何处理其余的

Answer 3

根据您使用的AngularJS版本，这是预期的。

检查出来可能会有所帮助。

https://docs.angularjs.org/guide/migration#you-can-only-bind-one-expression-to-src-ng-src-or-action-

Answer 4

检查这个工作： -

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app>
    <p>Enter first numb:<input type="text" ng-model="firstnb"/></p>
    <p>Enter sec numb:<input type="text" ng-model="secnb"/></p>
    <p>Enter operator:<input type="text" ng-model="op"/></p>
    <p>  Result is : {{firstnb}} &nbsp; {{op}} &nbsp; {{secnb}}  = </p>
</div>

＆＃13;

结合两个angularjs表达式无法正常工作

4 个答案: