[英]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.