为什么我的作用域函数没有获取从模型传递的数据
Why is my scope function not getting data passed from the model?
我有一个简单的angular应用程序,它会询问用户的名字和姓氏,但由于某种原因,我的changeBothNames()函数没有获得带有新值的firstName和lastName模型。
这是我的应用程序:
var app = angular.module("myApp", []);
app.controller("mainCtrl", ["$scope",
function($scope) {
$scope.message = "hello";
$scope.firstName = "";
$scope.lastName = "";
$scope.fullName = $scope.firstName + " " + $scope.lastName;
$scope.updateName = function() {
$scope.fullName = $scope.firstName + " " + $scope.lastName;
}
$scope.changeBothNames = function(first, second) {
alert("aye", first, second);
$scope.firstName = first;
$scope.lastName = second;
$scope.updateName();
}
}
]);
[ng-app="myApp"] [ng-controller="mainCtrl"] {
max-width: 750px;
margin: 50px auto 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="firstName"],
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="lastName"] {
padding: 5px;
border: 0;
border-bottom: 1px solid #ccc;
margin-right: 10px;
outline: 0;
}
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"] {
border: 0;
color: ghostwhite;
padding: 15px;
font-weight: 700;
background-image: -webkit-linear-gradient(top, #00B6FF, #002D40);
background-image: linear-gradient(to bottom, #00B6FF, #002D40);
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"]:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 5px 2px black;
}
[ng-app="myApp"] [ng-controller="mainCtrl"] [id="output"] [id="greeting"] {
font-weight: 700;
text-transform: capitalize;
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="mainCtrl">
<div class="row">
<input ng-model="firstName" placeholder="Enter a first name">
<input ng-model="lastName" placeholder="Enter a last name">
<button ng-click="changeBothNames(firstName, lastName)">Update Name</button>
</div>
<div class="row">
<div id="output" ng-if="fullName = ' ' ">
<div id="greeting">{{firstName}} {{lastName}}</div>
</div>
<div id="output" ng-if="fullName != ' ' ">
<div id="greeting">{{message}}</div>{{fullName}}
</div>
</div>
</div>
模型显然在更新,因为你可以在屏幕上看到输出,但由于某种原因,它没有被正确传递,有什么想法吗?
值正在传入,但alert
只接受一个参数。将其更改为console.log
,您就会看到。
var app = angular.module("myApp", []);
app.controller("mainCtrl", ["$scope",
function($scope) {
$scope.message = "hello";
$scope.firstName = "";
$scope.lastName = "";
$scope.fullName = $scope.firstName + " " + $scope.lastName;
$scope.updateName = function() {
$scope.fullName = $scope.firstName + " " + $scope.lastName;
}
$scope.changeBothNames = function(first, second) {
console.log("aye", first, second);
document.getElementById('message').innerHTML = first + ' ' + second;
$scope.firstName = first;
$scope.lastName = second;
$scope.updateName();
}
}
]);
[ng-app="myApp"] [ng-controller="mainCtrl"] {
max-width: 750px;
margin: 50px auto 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="firstName"],
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="lastName"] {
padding: 5px;
border: 0;
border-bottom: 1px solid #ccc;
margin-right: 10px;
outline: 0;
}
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"] {
border: 0;
color: ghostwhite;
padding: 15px;
font-weight: 700;
background-image: -webkit-linear-gradient(top, #00B6FF, #002D40);
background-image: linear-gradient(to bottom, #00B6FF, #002D40);
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
[ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"]:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 5px 2px black;
}
[ng-app="myApp"] [ng-controller="mainCtrl"] [id="output"] [id="greeting"] {
font-weight: 700;
text-transform: capitalize;
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="mainCtrl">
<div class="row">
<input ng-model="firstName" placeholder="Enter a first name">
<input ng-model="lastName" placeholder="Enter a last name">
<button ng-click="changeBothNames(firstName, lastName)">Update Name</button>
</div>
<div class="row">
<div id="output" ng-if="fullName == ' ' ">
<div id="greeting">{{firstName}} {{lastName}}</div>
</div>
<div id="output" ng-if="fullName != ' ' ">
<div id="greeting">{{message}}</div>{{fullName}}
</div>
</div>
</div>
<pre id="message"></pre>
相关文章:
- 模型数据未通过窗体传播到控制器ASP.NET MVC4
- 聚合Sails.JS/Waterline中的嵌套模型数据
- Ember.js-获取DOM元素的模型数据
- AngularJs 切换模板 URL 并访问模型数据
- Cakephp 访问不在模型数据数组上的输入
- 使用输入更新 ng 模型数据
- 来自模型数据的Ember JS自定义请求
- 主干模型默认值不会被模型数据覆盖
- 我们如何使用Jquery和ASP.NET MVC 4复杂模型数据设置HTML元素的值
- 如果ng-if的计算结果为false,AngularJS会使我的模型数据无效
- 在 KnockoutJS 中更改模型数据时出现 Javascript 内存泄漏
- 在脚本中使用角度模型数据
- 余烬需要刷新浏览器才能获取模型数据
- 无法在 javascript 中使用我的模型数据
- 余烬模型数据未显示在模板中
- Ember JS - 从路由操作更新/刷新模型数据
- 尝试从 MVC3 中的 JSON 解析模型数据
- 集合中的主干模型数据未保存到本地存储
- 主干新视图反映旧模型数据
- AngularJS;模型数据未在 html 表中列出