JSFiddle - React, Tailwind, and code Playground

by deathhell

HTML

<div ng-app>
    <div ng-controller="Controller">
        <div>
            <input type="text" ng-model="new_ip"> <button ng-click="add_ip()">新增</button>
        </div>
        <ul>
            <li ng-repeat="ip in iplist"><span>{{ip.ip}}</span><button ng-click="removeIp($index)">remove</button></li>                
        </ul>
        
    </div>
</div>

CSS

ul, li{
    list-style:none;
    
}
ul{
    padding:0;
    margin:10px 0;
}
li{
    padding:2px;
}
li:hover{
    background:#eee;
}
span{
    padding:2px;
    display:block;
    float:left;
    width:200px;
}

JavaScript

function Controller($scope){
    $scope.iplist= [];
    
    $scope.new_ip="";
    $scope.add_ip=function(){
        $scope.iplist.push({ip: $scope.new_ip});
        $scope.new_ip="";
    }
    
    $scope.removeIp=function(item){
        var $index=$scope.iplist.indexOf(item);
        $scope.iplist.splice($index,1);  
    }
}