Question

在下面的代码中，如果我们点击Div，它将在输入框中显示标签子值，从那里我必须更改标签名称，但是当我试图更改值时，它正在删除剩余的输入文本和所有标签与Div，你能告诉我如何解决这个问题??

var app = angular.module('myapp', []);

  app.controller('MainCtrl', function($scope) {
    $scope.textVal = 'click on User Name';

  $scope.selectedEvent = {};
$scope.setText = function (element) {
    $scope.selectedEvent = element;
    $scope.textVal = angular.element(element.currentTarget).find('label').html();

};
$scope.changeLabelText = function () {
  //  $scope.selectedEvent.innerHTML = $scope.textVal;
    angular.element($scope.selectedEvent.currentTarget).html($scope.textVal);
   // $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
};

 });

<!DOCTYPE html>
<html ng-app='myapp'>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <script src="script.js"></script>
  </head>
<body ng-controller="MainCtrl">

 <input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div  ng-click="setText($event)">
  <label>User Name</label><br/>
  <input type="text" placeholder="enter username">
</div>
</body>

</html>

Answer 1

我认为更多jQueryish解决方案将是

＆＃13;

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.textVal = 'click on User Name';

  $scope.label = {
    userName: 'User Name'
  }

  $scope.setText = function(key) {
    $scope.currentKey = key;
    $scope.textVal = $scope.label[$scope.currentKey];
  };
  $scope.changeLabelText = function() {
    $scope.label[$scope.currentKey] = $scope.textVal;
  };
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <input type="text" ng-model="textVal" ng-change="changeLabelText()">
    <div ng-click="setText('userName')">
      <label>{{label.userName}}</label>
      <br/>
      <input type="text" placeholder="enter username">
    </div>
  </div>
</div>

＆＃13;

Answer 2

var app = angular.module('myapp', []);

  app.controller('MainCtrl', function($scope) {
    $scope.textVal = 'Username';

  $scope.selectedEvent = {};
$scope.setText = function (element) {
    $scope.selectedEvent = element;
    $scope.textVal = angular.element(element.currentTarget).find('label').html();

};
$scope.changeLabelText = function () {
  //  $scope.selectedEvent.innerHTML = $scope.textVal;
    angular.element($scope.selectedEvent.currentTarget).html($scope.textVal);
   // $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
};

 });

<!DOCTYPE html>
<html ng-app='myapp'>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <script src="script.js"></script>
  </head>
<body ng-controller="MainCtrl">

 <input type="text" ng-model="textVal" >//change user name here//
<div  ng-click="setText($event)">
  <label>{{textVal}}</label><br/>
  <input type="text" placeholder="enter username" ng-model="" ng-change="changeLabelText($event)">
</div>
</body>

</html>

从ng-model更改子值

2 个答案: