如何将子值绑定到模型 angularjs

在下面的代码中，标签值与输入模型之间的数据不绑定。如果我们单击div，它将显示输入模型中子标签的值，我尝试更改标签名称，但它们之间没有发生双向绑定。演示

// Code goes here
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).children('label').html();
    };
    $scope.changeLabelText = function () {
        $scope.selectedEvent.innerHTML = $scope.textVal;
        angular.element(element.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>

更新了 HTML...

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

更新简斯

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).children('label').html();
};
$scope.changeLabelText = function () {
   // $scope.selectedEvent.innerHTML = $scope.textVal;
  //  angular.elhement(element.currentTarget).innerHTML = $scope.textVal;
    angular.element($scope.selectedEvent.currentTarget).children('label').html($scope.textVal)
};
 });

在这里更新了代码...

   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).html();
};
$scope.changeLabelText = function () {
  //  $scope.selectedEvent.innerHTML = $scope.textVal;
    //angular.element($scope.selectedEvent.currentTarget).html($scope.textVal);
   // $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
   angular.element($scope.selectedEvent.currentTarget).children('label').html($scope.textVal)
};
 });

网页已更新...

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

使用角度ng模型

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
    $scope.textVal = 'click on User Name';
    $scope.setText = function (element) {
        $scope.textVal = 'click on User Name';
        $scope.changedVal = '';
    };
    $scope.changeLabelText = function () {
        $scope.changedVal = $scope.textVal;
    };
});

.html

<!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()">//change user name here//
    <div ng-click="setText()">
      <label>User Name</label><br/> 
      <input type="text" placeholder="enter username" value="{{changedVal}}">
    </div>
  </body>
</html>

如果要更新标签

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
    $scope.textVal = 'User Name';
    $scope.setText = function (element) {
        $scope.textVal = 'User Name';
    };
});

.html

<body ng-controller="MainCtrl">    
    <input type="text" ng-model="textVal" ng-change="changeLabelText()">//change label here//
    <div ng-click="setText()">
      <i>Click here to reset</i><br/>
      <label>{{textVal}}</label><br/> 
      <input type="text" placeholder="enter {{textVal}}" value="">
    </div>
  </body>

相关内容

最新更新

热门标签：