如何用函數更改ng-init值？

Question

這是我的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示出和我想和第二輸入框的值來改變它點擊。我怎樣才能做到這一點？ 我也在按鈕上添加了一個功能。

Answer 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"> 

，當你正在使用ng-if的NEWNAME車型將只提供當產品在命名方式發送項目對象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> 

Answer 2

。

所以，你可以這樣做：

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>

Answer 3

據我瞭解，你想與第二個輸入框的值來改變第一個輸入框（item.name）的值（newname）按功能rename觸發點擊（可以說是重命名按鈕）。

解決方案是通過item和newname來運行。

簡體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_; 
}; 

見工作http://jsfiddle.net/vp2r52pb/