[英]How to change ng-init value with function?
这是我的Html和JavaScript代码,我想通过函数更改它。
Html :
<div class="container" ng-app="myApp" ng-controller="myController">
<h2>{{title}}</h2>
<ul ng-init="initItems()">
<li ng-repeat="item in items">
<input ng-model="item.name" type="text"/>
<div ng-if="makeVisible == item.id && makeVisible !='' ">
<input ng-model="newname" type="text"/>
<button ng-click="hideme(item.id); rename()" type="button">
<span class="glyphicon glyphicon-ok">
</span>
</button>
<button ng-click="hideme(item.id)" type="button">
<span class="glyphicon glyphicon-remove">
</span>
</button>
</div>
<input ng-click=" showme( item.id)" type="button" value="Rename"/>
</li>
</ul>
</div>
JavaScript :
function item(id, name) {
this.id = id;
this.name = name;
};
angular.module('myApp', []).controller('myController', function($scope) {
$scope.items = [];
$scope.makeVisible = "";
$scope.initItems = function() {
$scope.items.push(new item("0", 'Vikash'));
$scope.items.push(new item("1", 'Kumar'));
$scope.items.push(new item("2", 'Vishal'));
$scope.items.push(new item("3", 'Ajay'));
};
$scope.renameThis = function(index, oldValue) {
console.log("oldValue==" + oldValue);
console.log("indexx==" + index);
var id = 'box-' + index;
console.log("Id : " + id);
document.getElementById(id).style.display = "block";
console.log('jai hind');
};
$scope.showme = function(id) {
$scope.makeVisible = id;
console.log('id', id);
};
$scope.hideme = function(id) {
console.log(item);
$scope.makeVisible = "";
};
$scope.title = 'Enter new name here';
$scope.rename = function() {
$scope.item.name = $scope.newname;
console.log('dfasdd');
};
});
这是ng-init
值,它在输入框1中显示,我想在点击时用第二个输入框的值更改它。 我怎样才能做到这一点? 我还在按钮上添加了一个功能。
在项目中添加可见的attr,
function item(id, name) {
this.id = id;
this.visible=false;
this.name = name;
}
并将显示和隐藏功能更改为此代码
$scope.hideme = function(item) {
item.visible=false;
};
$scope.showme = function(item) {
item.visible=true;
};
并更改此代码
<div ng-if="makeVisible == item.id && makeVisible !='' ">
至:
<div ng-if="item.visible">
并将项目对象发送到shomme和hideme函数
<input ng-click="showme(item)" type="button" value="Rename"/>
<button ng-click="hideme(item); rename()" type="button">
<span class="glyphicon glyphicon-ok">
</span>
</button>
<button ng-click="hideme(item)" type="button">
<span class="glyphicon glyphicon-remove">
</span>
</button>
当您使用ng-if
newname模型仅在项目处于重命名模式时可用。
所以,你可以这样做:
function item(id, name) { this.id = id; this.name = name; }; angular .module('myApp', []) .controller('myController', function($scope) { $scope.items = []; $scope.makeVisible = ''; $scope.title = 'Enter new name here'; $scope.initItems = function() { $scope.items.push(new item('0', 'Vikash')); $scope.items.push(new item('1', 'Kumar')); $scope.items.push(new item('2', 'Vishal')); $scope.items.push(new item('3', 'Ajay')); }; $scope.showme = function(id) { $scope.makeVisible = id; }; $scope.hideme = function(id) { $scope.makeVisible = ''; }; $scope.rename = function(item, newname) { item.name = newname; }; });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="container" ng-app="myApp" ng-controller="myController"> <h2>{{title}}</h2> <ul ng-init="initItems()"> <li ng-repeat="item in items"> <input ng-model="item.name" ng-disabled="true" type="text"/> <div ng-if="makeVisible === item.id && makeVisible !== ''"> <input ng-model="newname" type="text" /> <button ng-click="hideme(item.id); rename(item, newname);" type="button"> <span class="glyphicon glyphicon-ok"></span> </button> <button ng-click="hideme(item.id)" type="button"> <span class="glyphicon glyphicon-remove"></span> </button> </div> <input ng-if="makeVisible !== item.id" ng-click="showme(item.id)" type="button" value="Rename"/> </li> </ul> </div>
据我所知,你想通过按键点击触发的函数rename
(让我们说重命名按钮)改变第一个输入框( item.name
)的值和第二个输入框( newname
)的值。
解决方法是将item
和newname
传递给function。
简化的HTML:
<ul ng-init="initItems()">
<li ng-repeat="item in items">
<input ng-model="item.name" type="text" />
<input ng-model="newname" type="text" />
<input ng-click="rename(item, newname)" type="button" value="Rename" />
</li>
</ul>
控制器:
$scope.rename = function(item, newname_) {
item.name = newname_;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.