JSFiddle - React, Tailwind, and code Playground

by shengoo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<fieldset ng-controller="simple">
    <legend>例子</legend>
    <p>First name: <input ng-model="firstName" /></p>
    <p>Last name: <input ng-model="lastName"  /></p>
    <p>Hello,    <input ng-model="fullName" ng-change="js_change()"></p>
    <div>{{firstName +" | "+ lastName }}</div>
    <p>nick name: <input ng-model="nick.name"  /></p>
    <p>{{nick.name}}</p>
</fieldset>

JavaScript

function simple($scope){
  $scope.firstName = "why";
  $scope.lastName = "520crazy";
  
  $scope.js_change = function(){
     var array = ($scope.fullName || "").split(" ");
     $scope.firstName = array[0] || "";
     $scope.lastName = array[1] || "";
  };
    
  $scope.$watch(function(){
        return $scope.firstName + " " + $scope.lastName;
    },function(newValue){
        $scope.fullName = newValue;
  });
  
  
}