NG-点击不更新模型模型、NG

2023-09-13 04:27:07 作者：打小就多情

我用AngularJS测试页一个刷新链接，调用一个函数，其中，作为回报，更新模型customer.name

不过，刷新单击仍然没有改变{{customer.name}}在视图中，我不明白为什么。

下面是我的应用程序的内容。

的index.html

 ＆LT;！DOCTYPE HTML＆GT;  ＆LT; HEAD＆GT;    ＆LT;标题＆GT;测试与LT; /标题＆GT;＆LT; /头＆GT;  ＆LT;机身NG-应用=roaMobileNgApp＆GT;    ＆LT;脚本SRC =脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本SRC =脚本/角ui.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;链接rel =stylesheet属性HREF =脚本/角ui.css＆GT;    ＆LT; DIV CLASS =容器NG-视图=＆GT;＆LT; / DIV＆GT;    ＆LT;脚本SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本SRC =脚本/控制器/ main.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /身体GT;＆LT; / HTML＆GT;

app.js

 使用严格的;angular.module（'roaMobileNgApp'，['UI']）  的.config（函数（$ routeProvider）{    $ routeProvider      。什么时候（'/'， {        templateUrl：意见/ main.html中，        控制器：'MainCtrl      }）      。除此以外（{        redirectTo：'/'      }）;  }）;

main.js

 使用严格的;angular.module（'roaMobileNgApp'）  .controller（'MainCtrl'，函数（$范围）{    $ scope.customer = {名称：''，                      ID：0};    $ scope.getDetails =功能（）{        $ scope.customer.name ='测试';    };  }）;

main.html中

 ＆LT; A HREF =＃NG点击=getDetails（）＆GT;＆刷新LT; / A＆GT;    ＆LT; P＆GT;＆LT;输入类型=文本NG模型=customer.name＆GT; {{customer.name}}＆下; / P＆GT;＆LT; / DIV＆GT;

解决方案

这可能是因为你通过单击更改地址：

 ＆LT; A HREF =＃NG点击=getDetails（）＆GT;＆刷新LT; / A＆GT;

此迫使角重新呈现的HTML以及控制器。

如下更改：

 ＆LT; A HREF =JavaScript的：无效（0）NG点击=getDetails（）＆GT;＆刷新LT; / A＆GT;

I have an AngularJS test page with a "Refresh" link which calls a function, which, in return, updates the model "customer.name"

However, the "Refresh" click still doesn't change the {{customer.name}} in the view and I don't understand why.

Here is the content of my application.

index.html

<!doctype html>
  <head>
    <title>Test</title>
</head>
  <body ng-app="roaMobileNgApp">


    <script src="scripts/angular.js"></script>

    <script src="scripts/angular-ui.js"></script>
    <link rel="stylesheet" href="scripts/angular-ui.css">

    <div class="container" ng-view=""></div>

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>


</body>
</html>

app.js

'use strict';

angular.module('roaMobileNgApp', ['ui'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

main.js

'use strict';

angular.module('roaMobileNgApp')
  .controller('MainCtrl', function ($scope) {


    $scope.customer = {name: '',
                      id: 0};



    $scope.getDetails = function() {
        $scope.customer.name = 'Test';
    };

  });

main.html

    <a href="#" ng-click="getDetails()">Refresh</a>
    <p><input type="text" ng-model="customer.name"> {{ customer.name }} </p>

</div>

解决方案

This is probably because you are changing the address by clicking:

<a href="#" ng-click="getDetails()">Refresh</a>

This forces angular to re-render the html as well as the controller.

Change it as below:

<a href="javascript:void(0)" ng-click="getDetails()">Refresh</a>

上一篇：json.stringify片阵列字阵列、json、stringify

下一篇：你如何遍历的预输入对象的数组？遍历、数组、对象

相关推荐

精彩图集

精彩推荐

图片推荐