Here is my Html and JavaScript code and I want to change it through function.

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');
    };
});

Here is value in ng-init which is showing in input box 1 and I want to change it with value of second input box on click. how can I do this? I also add a function on button.

Here is my Html and JavaScript code and I want to change it through function.

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');
    };
});

Here is value in ng-init which is showing in input box 1 and I want to change it with value of second input box on click. how can I do this? I also add a function on button.

• javascript
• angularjs

3 Answers 3

add visible attr in item,

function item(id, name) {
    this.id = id;
    this.visible=false;
    this.name = name;
}

and change show and hide function to this code

$scope.hideme = function(item) {
     item.visible=false;
};

$scope.showme = function(item) {
     item.visible=true;
};

and change this code

<div ng-if="makeVisible == item.id  && makeVisible !='' ">

to:

<div ng-if="item.visible">

and send item object to shomme and hideme function

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

As I understand, you want to change value of first input box (item.name) with value of second input box (newname) by function rename triggered on-click (lets say Rename button).

Solution for that is to pass item and newname to function.

Simplified 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>

Controller:

$scope.rename = function(item, newname_) {
    item.name = newname_;
};

See working http://jsfiddle/vp2r52pb/

As you are using ng-if the newname model will be available only when an item is in rename mode.

So, you can do like this:

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./bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis./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>