javascript - Ng-model 没有按预期工作?

标签 javascript html angularjs model-view-controller angular-ngmodel

我有一个文本框,它通过 ng-model=sampleValue

连接到 angular js

现在,我的要求是每当我单击按钮时,显示功能都应该被执行并且文本框的值应该更改为 Harish。但这不是我得到的结果。请看一下我在下面编写的代码:

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

app.controller("mainController", [ "$scope", function($scope){
  $scope.show = function(){
    $scope.sampleValue = "Harish";
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp">
<input ng-controller="mainController" type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>

提前谢谢你:)

最佳答案

目前您已经在输入元素上应用了 ng-controller,这意味着 Controller 范围仅限于 input DOM,因此 show方法不会被调用。您应该将 ng-controller 移动到包装器元素(这里是它的 body)。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">  </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController">

  <input type="text" ng-model="sampleValue" />
  <button ng-click="show()">Click Here</button>
</body>

Plunker

关于javascript - Ng-model 没有按预期工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43044877/

相关文章:

javascript - AngularJS、NodeJs 和 ExpressJS

php - 如何在 javascript 函数中使用 php

JavaScript/ typescript : unable to regenerate object

javascript - 如何在 java 或 javascript 中使用 SCH 验证 XML

javascript - 自定义滚动条,在拇指周围具有灵活、扩展的轨迹,就像引力透镜一样

html - Wget 从 html 复制文本

javascript - 如何向现有对象添加原型(prototype)属性

javascript - 无法让简单的 AngularJS $http 调用工作

angularjs - 嵌入指令和表格

javascript - express.js中基于请求参数的动态路由